jQuery Interfaz de usuario autocompletar con elemento e id

Desde la pestaña Resumen del plugin de autocompletar de jQuery:

Los datos locales pueden ser una matriz simple de Cadenas, o contiene Objetos para cada elemento en la matriz, con una propiedad label o value o ambas. El la propiedad label se muestra en el menú de sugerencias. El valor será insertado en el elemento de entrada después el usuario seleccionó algo de la menu. Si solo una propiedad es especificado, se utilizará para ambos, eg. si usted proporciona solamente valor-propiedades, el valor también ser utilizado como la etiqueta.

Así que su matriz "bidimensional" podría verse como:

var $local_source = [{
    value: 1,
    label: "c++"
}, {
    value: 2,
    label: "java"
}, {
    value: 3,
    label: "php"
}, {
    value: 4,
    label: "coldfusion"
}, {
    value: 5,
    label: "javascript"
}, {
    value: 6,
    label: "asp"
}, {
    value: 7,
    label: "ruby"
}];

Puede acceder a las propiedades de etiqueta y valor dentro focus y select evento a través del argumento ui usando ui.item.label y ui.item.value.

Editar

Parece que tienes que "cancelar" el foco y seleccionar eventos para que no coloque los números de identificación dentro de los cuadros de texto. Mientras lo hace, puede copiar el valor en una variable oculta en su lugar. Aquí hay un ejemplo.

Mi código solo funcionó cuando agregué 'return false' a la función select. Sin esto, la entrada se estableció con el valor correcto dentro de la función select y luego se estableció en el valor id después de que la función select terminara. El retorno falso resolvió este problema.

$('#sistema_select').autocomplete({

    minLength: 3,
    source: <?php echo $lista_sistemas;?> ,
    select: function (event, ui) {
         $('#sistema_select').val(ui.item.label); // display the selected text
         $('#sistema_select_id').val(ui.item.value); // save selected id to hidden input
         return false;
     },
    change: function( event, ui ) {
        $( "#sistema_select_id" ).val( ui.item? ui.item.value : 0 );
    } 
});

Además, agregué una función al evento de cambio porque, si el usuario escribe algo en la entrada o borra una parte de la etiqueta del elemento después de seleccionar un elemento, necesito actualizar el campo oculto para que no obtenga el id incorrecto (desactualizado). Por ejemplo, si mi fuente es:

var $local_source = [
       {value: 1,  label: "c++"}, 
       {value: 2,  label: "java"}]

Y el usuario escribe ja y selecciona la opción 'java' con el autocompletar, guardo el valor 2 en el campo oculto. Si el usuario borra una letra de 'java', por ejemplo terminando con ' jva ' en el campo de entrada, no puedo pasar a mi código el id 2, porque el usuario cambió el valor. En este caso, establezco el id en 0.

Solo quiero compartir lo que funcionó en mi parte, en caso de que también pudiera ayudar a alguien más. Alternativamente basado en la respuesta de Paty Lustosa anterior, por favor permítanme añadir otro enfoque derivado de este sitio donde utilizó un enfoque ajax para el método fuente

Http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3

El kicker es el formato "string" o json resultante de su script php (listing.php abajo) que deriva la el conjunto de resultados que se mostrará en el campo autocompletar debe seguir algo como esto:

    {"list":[
     {"value": 1, "label": "abc"},
     {"value": 2, "label": "def"},
     {"value": 3, "label": "ghi"}
    ]}

Luego en la parte fuente del método de autocompletar:

    source: function(request, response) {
        $.getJSON("listing.php", {
            term: request.term
        }, function(data) {                     
            var array = data.error ? [] : $.map(data.list, function(m) {
                return {
                    label: m.label,
                    value: m.value
                };
            });
            response(array);
        });
    },
    select: function (event, ui) {
        $("#autocomplete_field").val(ui.item.label); // display the selected text
        $("#field_id").val(ui.item.value); // save selected id to hidden input
        return false;
    }

Espero que esto ayude... todo lo mejor!

<script type="text/javascript">
$(function () {
    $("#MyTextBox").autocomplete({
        source: "MyDataFactory.ashx",
        minLength: 2,
        select: function (event, ui) {
            $('#MyIdTextBox').val(ui.item.id);
            return ui.item.label;
        }
    });
});

Las respuestas anteriores ayudaron, pero no funcionaron en mi implementación. En lugar de usar la configuración del valor usando jQuery, estoy devolviendo el valor de la función a la opción seleccionar.

La MyDataFactory.ashx page tiene una clase con tres propiedades Id, Label, Value.

Pase la Lista al serializador JavaScript y devuelva la respuesta.

No creo que haya necesidad de hackear las propiedades de valor y etiqueta, usar campos de entrada ocultos o suprimir eventos. Puede agregar su propia propiedad personalizada a cada objeto de Autocompletar y luego leer ese valor de propiedad más tarde.

Aquí hay un ejemplo.

$(#yourInputTextBox).autocomplete({
    source: function(request, response) {
        // Do something with request.term (what was keyed in by the user).
        // It could be an AJAX call or some search from local data.
        // To keep this part short, I will do some search from local data.
        // Let's assume we get some results immediately, where
        // results is an array containing objects with some id and name.
        var results = yourSearchClass.search(request.term);

        // Populate the array that will be passed to the response callback.
        var autocompleteObjects = [];
        for (var i = 0; i < results.length; i++) {
            var object = {
                // Used by jQuery Autocomplete to show
                // autocomplete suggestions as well as
                // the text in yourInputTextBox upon selection.
                // Assign them to a value that you want the user to see.
                value: results[i].name;
                label: results[i].name;

                // Put our own custom id here.
                // If you want to, you can even put the result object.
                id: results[i].id;
            };

            autocompleteObjects.push(object);
        }

        // Invoke the response callback.
        response(autocompleteObjects);
    },
    select: function(event, ui) {
        // Retrieve your id here and do something with it.
        console.log(ui.item.id);
    }
});

La documentación menciona que debe pasar una matriz de objetos con propiedades de etiqueta y valor. Sin embargo, ciertamente puede pasar objetos con más que estas dos propiedades y leer ellos más tarde.

Aquí está la parte relevante a la que me estoy refiriendo.

Array: Se puede usar un array para datos locales. Hay dos compatibles formatos: Una matriz de cadenas: ["Choice1", "Choice2" ] Una matriz de objetos con propiedades de etiqueta y valor: [{label: "Choice1", valor: "value1"},... ] La propiedad label se muestra en la sugerencia menu. El valor se insertará en el elemento de entrada cuando un usuario selecciona un elemento. Si solo se especifica una propiedad, utilizar para ambos, por ejemplo, si proporciona solo propiedades de valor, el valor también se utilizará como etiqueta.

Esto se puede hacer sin el uso de campo oculto. Usted tiene que tomar ventaja de la capacidad de jQuerys para hacer atributos personalizados en tiempo de ejecución.

('#selector').autocomplete({
    source: url,
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.label); // display the selected text
        $("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input
    }
});

$('#button').click(function() {
    alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input
}); 

Por fin lo hice Gracias a muchos amigos, y un agradecimiento especial al Señor https://stackoverflow.com/users/87015/salman-a gracias a su código pude resolverlo correctamente. finalmente mi código se ve así como estoy usando groovy grails espero que esto ayude a alguien allí.. Muchas gracias

El código Html se ve así en mi página gsp

  <input id="populate-dropdown" name="nameofClient" type="text">
  <input id="wilhaveid" name="idofclient" type="text">

La función Script es así en mi página gsp

  <script>
        $( "#populate-dropdown").on('input', function() {
            $.ajax({
                url:'autoCOmp',
                data: {inputField: $("#populate-dropdown").val()},
                success: function(resp){
                    $('#populate-dropdown').autocomplete({
                        source:resp,
                        select: function (event, ui) {
                            $("#populate-dropdown").val(ui.item.label);
                            $("#wilhaveid").val(ui.item.value);
                             return false;
                        }
                    })
                }
            });
        });
    </script>

Y mi código de controlador es así

   def autoCOmp(){
    println(params)
    def c = Client.createCriteria()
    def results = c.list {
        like("nameOfClient", params.inputField+"%")
    }

    def itemList = []
    results.each{
        itemList  << [value:it.id,label:it.nameOfClient]
    }
    println(itemList)
    render itemList as JSON
}

Uno más lo que no he establecido el campo id oculto porque al principio estaba comprobando que estoy obteniendo el id exacto, puede mantenerlo oculto solo ponga type = hidden en lugar de text for second input item in html

Gracias !

He intentado mostrar el código anterior (valor o ID) en el cuadro de texto insted de texto de la etiqueta. Después de eso he intentado evento.preventDefault () funciona perfectamente...

var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}]

$(".jquery-autocomplete").autocomplete({
    source: e,select: function( event, ui ) {
        event.preventDefault();
        $('.jquery-autocomplete').val(ui.item.label);
        console.log(ui.item.label);
        console.log(ui.item.value);
    }
});

Suponiendo que los objetos de su matriz de origen tienen una propiedad id...

var $local_source = [
    { id: 1, value: "c++" },
    { id: 2, value: "java" },
    { id: 3, value: "php" },
    { id: 4, value: "coldfusion" },
    { id: 5, value: "javascript" },
    { id: 6, value: "asp" },
    { id: 7, value: "ruby" }];

Obtener la instancia actual e inspeccionar su propiedad SelectedItem le permitirá recuperar las propiedades del elemento seleccionado actualmente. En este caso alertando el id del elemento seleccionado.

$('#button').click(function() {
    alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id;
});