jQuery UI autocompletar con elemento e id

Question

Tengo la siguiente secuencia de comandos que funciona con una matriz de 1 dimensión. ¿Es posible hacer que esto funcione con una matriz bidimensional? Luego, cualquiera que sea el elemento seleccionado, al hacer clic en un segundo botón en la página, debe mostrar el id. De cualquier elemento seleccionado.

Este es el guión con la matriz 1 dimensiones:

var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]; 
$("#txtAllowSearch").autocomplete({ 
    source: $local_source 
}); 

Este es el script para el botón para comprobar el id, que es incompleta:

$('#button').click(function() { 
    // alert($("#txtAllowSearch").someone_get_id_of_selected_item); 
}); 

Answer 1

Es necesario utilizar la interfaz de usuario .item.label (el texto) y ui.item.value (el id) propiedades

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

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

[Editar] también preguntará cómo crear la matriz multidimensional ...

usted debería ser capaz de crear la matriz de esta manera:

var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"], 
        [4,"javascript"], [5,"asp"], [6,"ruby"]]; 

Leer más acerca de cómo trabajar con matrices multidimensionales aquí: http://www.javascriptkit.com/javatutors/literal-notation2.shtml

Answer 2

Desde el Descripción general de la pestaña plugin de jQuery autocompletado:

Los datos locales puede ser una matriz sencilla de cuerdas, o que contiene objetos de cada elemento en la matriz, ya sea con una etiqueta o propiedad de valor o ambos. La propiedad de etiqueta se muestra en el menú de sugerencias . El valor será insertado en el elemento de entrada después de el usuario seleccionó algo del menú . Si solo se especifica una propiedad , se usará para ambos, , por ejemplo. si proporciona solo propiedades de valor , también se usará el valor como etiqueta.

Así que su matriz "de dos dimensiones" podría parecerse a:

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 de la discusión ui usando ui.item.label y ui.item.value.

Editar

Parece que hay que "cancelar" el enfoque y seleccionar eventos de modo que no pone los números de identificación dentro de los cuadros de texto. Mientras lo hace, puede copiar el valor en una variable oculta. Here is an example.

Answer 3

<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 aplicación. En lugar de utilizar la configuración del valor usando jQuery, devuelvo el valor de la función a la opción de selección.

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

Pase la lista al serializador de JavaScript y devuelva la respuesta.

Answer 4

Mi código solo funcionó cuando agregué 'return false' a la función de selección. Sin esto, la entrada se configuró con el valor correcto dentro de la función de selección y luego se ajustó al valor de identificación una vez que se finalizó la función de selección. 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, he añadido una función para el evento de cambio, ya que, si el usuario escribe algo en la entrada o borra una parte de la etiqueta del elemento después de que se ha seleccionado un artículo, es necesario que actualice el campo oculto por lo que no recibo la identificación incorrecta (obsoleta). Por ejemplo, si mi fuente es:

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

y el tipo de usuario ja y seleccione la opción 'java' con la función de autocompletar, que almacena 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, establecí el ID en 0.

Answer 5

Solo quiero compartir lo que funcionó en mi extremo, en caso de que sea capaz de ayudar a alguien más también. Como alternativa basada en la respuesta de Paty Lustosa anterior, permítanme añadir otro enfoque derivado de este sitio donde se utiliza un enfoque ajax para el método fuente

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

El golpeador es el resultado "cadena" o el formato JSON de su script php (listing.php abajo) que se deriva del conjunto de resultados que se muestran en el campo de autocompletar debe seguir algo como esto:

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

a continuación, en la parte de la 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!

Answer 6

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

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); 
    } 
}); 

El documentation menciona usted tiene que pasar en una matriz de objetos con etiqueta y valor propiedades. Sin embargo, puede pasar objetos con más que estas dos propiedades y leerlos más tarde.

Aquí está la parte relevante a la que me refiero.

matriz: una matriz se puede utilizar para datos locales. Hay dos formatos admitidos : Una matriz de cadenas: ["Choice1", "Choice2"] Una matriz de objetos con propiedades de etiqueta y valor: [{label: "Choice1", valor: "value1"}, .. .] La propiedad de la etiqueta se muestra en el menú de sugerencia . El valor se insertará en el elemento de entrada cuando un usuario seleccione un elemento. Si solo se especifica una propiedad, se usará para ambas, p.Si solo proporciona propiedades de valor, el valor será también se utilizará como etiqueta.

Answer 7

Esto se puede hacer sin el uso de campo oculto. Debe aprovechar la capacidad de JQuerys para crear 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 
}); 

Answer 8

Por fin lo hice Muchas gracias amigos, y un agradecimiento especial al Sr. https://stackoverflow.com/users/87015/salman-a a causa de su código que fue capaz de resolver adecuadamente. por último, mi código es el aspecto de esto como lo estoy usando griales maravilloso espero que esto ayude a alguien allí .. Muchas gracias

código HTML se parece a esto en mi página gsp

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

Función guión es así en mi página de 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 del 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 
} 

Una cosa más que no he establecido campo de identificación oculta porque al principio estaba comprobando que estoy obteniendo la identificación exacta, puede mantenerlo oculto simplemente ponga type = hidden en lugar de texto para el segundo elemento de entrada en html

¡Gracias!

Answer 9

He intentado mostrar el código anterior (valor o ID) en el cuadro de texto inscrito en el texto de la etiqueta. Después de que he intentado event.preventDefault() que está funcionando 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); 
    } 
}); 

Answer 10

Suponiendo que los objetos de la 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" }]; 

Conseguir de la corriente instancia e inspeccionar su propiedad de elemento seleccionado le permitirá recuperar las propiedades del artículo actualmente seleccionado. En este caso, alertar a la identificación del elemento seleccionado.

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