jQuery UI autocompletar con JSON

Question

Muy bien he estado trabajando duro en esto (soy terrible en esto) pero he intentado leer todo lo que puedo y todavía no puedo hacer que funcione.

tratando de hacer autocompletar con jquery ui

mi JSON se parece a esto

{"dealers": 
    { 
     "1156":"dealer 1", 
     "1122":"dealer 2", 
     "1176":"dealer 3", 
     "1491":"dealer 4", 
     "1463":"dealer 5", 
     "269":"dealer 6" 
    } 
} 

estoy tratando de utilizar esta información como fuente de autocompletar. Obtengo el objeto de respuesta muy bien, solo estoy teniendo problemas para obtenerlo en el formato correcto, de modo que pueda colocar el "###" en un campo oculto vinculado al "valor" que debe mostrarse como la parte del desplegable.

estado tratando un millón de maneras diferentes, pero un reciente intento estuvo por debajo

function ajaxCall() { 
    $.getJSON("/example/location/example.json?term=" + $('#dealerName').val(), 
     function(data) { 
     $.each(data.dealers, function(k, v) {     
       alert(k + ' : ' + v); 
     }); 
    });   
} 

$('#dealerName').autocomplete({ 
    source: ajaxCall, 
    minLength: 2, 
    delay: 100 
}); 

por favor y gracias tanto!

Answer 1

Necesita transformar el objeto que está recibiendo en una matriz en el formato que jQueryUI espera.

Puede usar $.map para transformar el objeto dealers en esa matriz.

$('#dealerName').autocomplete({ 
    source: function (request, response) { 
     $.getJSON("/example/location/example.json?term=" + request.term, function (data) { 
      response($.map(data.dealers, function (value, key) { 
       return { 
        label: value, 
        value: key 
       }; 
      })); 
     }); 
    }, 
    minLength: 2, 
    delay: 100 
}); 

Tenga en cuenta que cuando selecciona un elemento, la "tecla" se colocará en el cuadro de texto. Puede cambiar esto ajustando las propiedades label y value que devuelve la función de devolución de llamada $.map.

Alternativamente, si tiene acceso al código del lado del servidor que está generando el JSON, puede cambiar la forma en que se devuelven los datos. Mientras los datos:

• es una matriz de objetos que tienen una propiedad label, una propiedad value, o ambos, o
• Es un sencillo arreglo de cadenas

En otras palabras, si se puede dar formato a los datos como estos:

[{ value: "1463", label: "dealer 5"}, { value: "269", label: "dealer 6" }] 

o esto:

["dealer 5", "dealer 6"] 

Entonces el JavaScript se vuelve mucho más sencillo:

$('#dealerName').autocomplete({ 
    source: "/example/location/example.json" 
}); 

Answer 2

entiendo que su sido respondidas. pero espero que esto ayude a alguien en el futuro y ahorre tanto tiempo y dolor.

el código completo está a continuación: Este lo hice para un cuadro de texto para que se Autocomplete en CiviCRM. Espero que ayuda a alguien

CRM.$('input[id^=custom_78]').autocomplete({ 
      autoFill: true, 
      select: function (event, ui) { 
        var label = ui.item.label; 
        var value = ui.item.value; 
        // Update subject field to add book year and book product 
        var book_year_value = CRM.$('select[id^=custom_77] option:selected').text().replace('Book Year ',''); 
        //book_year_value.replace('Book Year ',''); 
        var subject_value = book_year_value + '/' + ui.item.label; 
        CRM.$('#subject').val(subject_value); 
        CRM.$('input[name=product_select_id]').val(ui.item.value); 
        CRM.$('input[id^=custom_78]').val(ui.item.label); 
        return false; 
      }, 
      source: function(request, response) { 
       CRM.$.ajax({ 
        url: productUrl, 
         data: { 
             'subCategory' : cj('select[id^=custom_77]').val(), 
             's': request.term, 
            }, 
        beforeSend: function(xhr) { 
         xhr.overrideMimeType("text/plain; charset=x-user-defined"); 
        }, 

        success: function(result){ 
           result = jQuery.parseJSON(result); 
           //console.log(result); 
           response(CRM.$.map(result, function (val,key) { 
                 //console.log(key); 
                 //console.log(val); 
                 return { 
                   label: val, 
                   value: key 
                 }; 
               })); 
        } 
       }) 
       .done(function(data) { 
        if (console && console.log) { 
        // console.log("Sample of dataas:", data.slice(0, 100)); 
        } 
       }); 
      } 
    }); 

código PHP en la forma en que estoy volviendo datos a este jQuery llamada AJAX en la función Autocompletar:

/** 
* This class contains all product related functions that are called using AJAX (jQuery) 
*/ 
class CRM_Civicrmactivitiesproductlink_Page_AJAX { 
    static function getProductList() { 
     $name = CRM_Utils_Array::value('s', $_GET); 
    $name = CRM_Utils_Type::escape($name, 'String'); 
    $limit = '10'; 

     $strSearch = "description LIKE '%$name%'"; 

     $subCategory = CRM_Utils_Array::value('subCategory', $_GET); 
    $subCategory = CRM_Utils_Type::escape($subCategory, 'String'); 

     if (!empty($subCategory)) 
     { 
       $strSearch .= " AND sub_category = ".$subCategory; 
     } 

     $query = "SELECT id , description as data FROM abc_books WHERE $strSearch"; 
     $resultArray = array(); 
     $dao = CRM_Core_DAO::executeQuery($query); 
     while ($dao->fetch()) { 
      $resultArray[$dao->id] = $dao->data;//creating the array to send id as key and data as value 
     } 
     echo json_encode($resultArray); 
    CRM_Utils_System::civiExit(); 
    } 
} 

Answer 3

utilizo este guión de autocompletar ...

$('#custmoers_name').autocomplete({ 
    source: function (request, response) { 

     // $.getJSON("<?php echo base_url('index.php/Json_cr_operation/autosearch_custmoers');?>", function (data) { 
      $.getJSON("Json_cr_operation/autosearch_custmoers?term=" + request.term, function (data) { 
      console.log(data); 
      response($.map(data, function (value, key) { 
       console.log(value); 
       return { 
        label: value.label, 
        value: value.value 
       }; 
      })); 
     }); 
    }, 
    minLength: 1, 
    delay: 100 
}); 

Mi regreso JSON: - después de una búsqueda [{"label":"Mahesh Arun Wani","value":"1"}]m

pero se mostrará en desplegable [object object] ...