jQuery UI autocompletar - ¿Cómo seleccionar un elemento y MANTENER la etiqueta (no el valor) en el texto de entrada

Estoy tratando de usar el plugin jQuery UI de autocompletar (click to see the demo page of JQuery UI Autocomplete plugin)jQuery UI autocompletar - ¿Cómo seleccionar un elemento y MANTENER la etiqueta (no el valor) en el texto de entrada

estoy usando como fuente de datos de una lista de objetos como bramido:

  var availableTags = [ 
       {label: "Sao Paulo", value: "SP"}, 
       {label: "Sorocaba", value: "SO"}, 
       {label: "Paulinia", value: "PA"}, 
       {label: "São Roque", value: "SR"} 
      ];

el problema es que cuando selecciono un elemento, el valor de la fuente de datos se establece en el campo de entrada y no la etiqueta. He creado un control para seleccionar para guardar el valor del artículo en un campo oculto y establecer la etiqueta en el campo de entrada, pero este evento se activa demasiado pronto por el complemento y el valor se restablece al campo de entrada.

HTML:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.base.css" />  
     <link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.theme.css" />  
     <style> 
      .ui-menu-item 
      { 
       font-size: 12px; 
      } 
     </style> 
     <script src="JQuery/1.6.2/jquery-1.6.2.min.js" type="text/javascript"></script> 
     <script src="JQuery.UI/1.8.14/js/jquery-ui-1.8.14.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       var availableTags = [ 
        {label: "Sao Paulo", value: "SP"}, 
        {label: "Sorocaba", value: "SO"}, 
        {label: "Paulinia", value: "PA"}, 
        {label: "São Roque", value: "SR"} 
       ]; 

       $("#txtCidade").autocomplete({ minLength: 0, 
               source: availableTags);  
      }); 

      function OnSelect(event, ui) 
      { 
       var item = ui.item; 
       var itemLabel = item.label; 
       var itemValue = item.value; 

       $("#hidCidade").val(itemValue); 
       $("#txtCidade").val(itemLabel); 
      } 

     </script> 
    </head> 
    <body> 
     <form> 
      <input id="hidCidade" type="hidden" /> 
      <input id="txtCidade" type="input" class="ui-autocomplete-input" /> 
     </form> 
    </body> 
</html>

Por favor, alguien me podría ayudar con esto?

Gracias!

Fuente

2012-03-19 outlookrperson

He resuelto el problema al crear los controladores para OnFocus y OnSelect y devolver falso en cada uno.

 function OnFocus(event, ui) 
     { 
      $("#txtCidade").val(ui.item.label); 
      return false; 
     } 

     function OnSelect(event, ui) 
     { 
      var item = ui.item; 
      var itemLabel = item.label; 
      var itemValue = item.value; 
      var campo = $("#txtCidade"); 

      $("#hidCidade").val(itemValue); 
      $("#txtCidade").val(itemLabel); 

      var campoValue = campo.val(); 
      var hidCampoValue = $("hidCidade").val(); 
      return false; 
     }

Fuente

2012-03-19 19:46:22 outlookrperson

Cambiar la llamada de autocompletar a lo siguiente:

$("#txtCidade").autocomplete({ 
    source: availableTags, 
    select: function(event, ui) { 
     $("#hidCidade").val(ui.item.label); 
    } 
});

#txtCidade debe pckup automáticamente la etiqueta seleccionada cuando se hace clic en un elemento de autocompletar.

Ver a jsFiddle example aquí.

Fuente

2012-03-19 15:02:51 j08691

esto no funciona! – outlookrperson

¿Qué pasa con eso no funciona? – j08691

Lo siento @ j08691, pero creo que no entendiste la pregunta correctamente. Usando el código que ha proporcionado en jsfiddler, seleccionando una opción, el valor (no la etiqueta) aparecerá en el campo de la caja de texto. – outlookrperson

Ya que tuve que resolver esto también. Pensé que mostraría mi solución. En mi humilde opinión, es más limpio ya que no necesita las funciones separadas OnSelect y OnFocus. (aunque realmente hace lo mismo que lo que terminó la persona haciendo)

$('#txtCidade').autocomplete({ 
    source: availableTags, 
    focus: function(event, ui) { 
    $(this).val(ui.item.label); 
    return false; 
    }, 
    select: function(event, ui) { 
    $('#hidCidade').val(ui.item.value); 
    $(this).val(ui.item.label); 
    return false; 
    } 
});

Fuente

2012-11-21 05:25:57 snorris

¡Me encanta! Esto fue perfecto y fácil. :) – gregthegeek

el retorno falso hace toda la diferencia :) – 2ni

jQuery UI autocompletar - ¿Cómo seleccionar un elemento y MANTENER la etiqueta (no el valor) en el texto de entrada

Respuesta

Cuestiones relacionadas