JQuery autocomplete categories Select label and value

Question

Trying to get jQuery autocomplete with categories to return the selected value in the search field and the value in a separate input field.

I changed the data to make a difference, as well as the label and category.

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

But the value is always returned in the search field instead of the label.

Answer 1

How jquery ui autocomplete works when delivering both labels and values. If you want the label to return to the search field, rename the value field.

Updated script: http://jsfiddle.net/jensbits/bM7ck/3/

Answer 2

You are close, you just need to:

• Add return false to the end of the select event handler and
• Add an event handler for the focus event so that you can override this using a label instead of a value.

Here your code is updated:

 $("#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. } }); 

Here is an updated example: 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); } }); });