Categorías de Autocompletar jQuery Seleccionar etiqueta y valor

Question

Intentando obtener el autocompletado de jQuery con categorías para devolver el valor seleccionado al campo de búsqueda y el valor a un campo de entrada separado.

He modificado los datos para tener un valor, así como la etiqueta y la categoría.

Ver http://jsfiddle.net/chrisk/bM7ck/

embargo, el valor siempre se devuelve al campo de búsqueda en lugar de la etiqueta.

Answer 1

Así es como funciona el autocompletado de jquery ui cuando proporciona una etiqueta y un valor. Si desea que la etiqueta vuelva al campo de búsqueda, cambie el nombre del campo de valor.

violín Actualizado: http://jsfiddle.net/jensbits/bM7ck/3/

Answer 2

estás cerca, sólo tiene que:

1. Añadir return false hasta el final de su controlador de eventos select y
2. Añadir un controlador de eventos para el focus evento para que también pueda anularlo, utilizando la etiqueta en lugar del valor.

Aquí es el código de actualización:

$("#search").catcomplete({ 
    delay: 0, 
    source: data, 
    select: function(event, ui) { 
     $('#search').val(ui.item.label); 
     $('#searchval').val(ui.item.value); 
     return false; // Prevent the widget from inserting the value. 
    }, 
    focus: function(event, ui) { 
     $("#search").val(ui.item.label); 
     return false; // Prevent the widget from inserting the value. 
    } 
}); 

He aquí un ejemplo actualización: http://jsfiddle.net/q2kDU/

Answer 3

$(function() { 
     $("#searchitems").autocomplete({ 
      source: [<?php echo $search /*example for full list in php*/?>], 
      minLength: 2, 
      select: function(event, ui) { 
       event.preventDefault(); 
       $("#searchitems").val(ui.item.label); 
       $('#searchitemvalue').val(ui.item.value); 
       window.location="#"; //location to go when you select an item 
      }, 
      focus: function(event, ui) { 
       event.preventDefault(); 
       $("#searchitems").val(ui.item.label); 
       $('#searchitemsvalue').val(ui.item.value); 
      } 
     }); 
    });