ejemplo - jQuery UI autocompletar con JSON

jquery autocomplete select event

Question

Bien, me he estado atormentando 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 ve así

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

Estoy tratando de usar 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 de un millón de formas diferentes, pero un intento reciente fue 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 muchas gracias!

Answer 1

Entiendo que ya ha sido respondida. 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 sea Autocompletar en CiviCRM. Espero que ayude 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 sobre cómo estoy devolviendo datos a esta llamada jquery ajax en 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 2

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

Puede usar $.map para transformar el objeto de 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 "clave" se colocará en el cuadro de texto. Puede cambiar esto modificando la label y las propiedades de 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 de label , una propiedad de value o ambas, o
• Es una simple serie de cadenas

En otras palabras, si puede formatear los datos de esta manera:

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

o esto:

["dealer 5", "dealer 6"]

Entonces tu JavaScript se vuelve mucho más simple:

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

Answer 3

Yo uso este script para 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
});

My json return: - [{"label":"Mahesh Arun Wani","value":"1"}] después de la búsqueda m

pero se muestra en el menú desplegable [object object] ...