Autocomplete that applies a value that is not marked in the text box

Question

I'm having trouble trying to auto-complete correctly.

Everything looks fine to me, but ....

<script> $(function () { $("#customer-search").autocomplete({ source: 'Customer/GetCustomerByName', minLength: 3, select: function (event, ui) { $("#customer-search").val(ui.item.label); $("#selected-customer").val(ui.item.label); } }); }); </script> <div> <input id="customer-search" /> </div> @Html.Hidden("selected-customer") 

However, when I select an item from the drop-down list, this value is applied to the text field instead of the label.

What did I do wrong?

If I look at the source using firebug, I see that my hidden field is updated correctly.

Answer 1

The default behavior of the select event is to update input with ui.item.value . This code runs after your event handler.

Just return false or call event.preventDefault() to prevent this from happening. I would also recommend doing something similar for the focus event to prevent ui.item.value from being placed in input when the user hovers:

 $("#customer-search").autocomplete({ /* snip */ select: function(event, ui) { event.preventDefault(); $("#customer-search").val(ui.item.label); $("#selected-customer").val(ui.item.label); }, focus: function(event, ui) { event.preventDefault(); $("#customer-search").val(ui.item.label); } }); 

Example: http://jsfiddle.net/andrewwhitaker/LCv8L/

Answer 2

Just wanted to add that instead of referencing the input element to the "id" inside, select and focus you can use this selector, for example:

 $(this).val(ui.item.label); 

useful when you assign autocomplete to multiple elements, i.e. a class:

 $(".className").autocomplete({ ... focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label); } }); 

Answer 3

In my case, I need to write another field 'id' in hidden input. Therefore, I am adding another field to the data returned from the ajax call.

 {label:"Name", value:"Value", id:"1"} 

And they added the "Create New" link at the bottom of the list. After clicking the "Create New" button, a modal mod will appear, and you can create a new element there.

 $('#vendorName').autocomplete ( { source: "/Vendors/Search", minLength: 2, response: function (event, ui) { ui.content.push ({ label: 'Add a new Name', value: 'Add a new Name' }); }, select: function (event, ui) { $('#vendorId').val(ui.item.id); }, open: function (event, ui) { var createNewVendor = function () { alert("Create new"); } $(".ui-autocomplete").find("a").last().attr('data-toggle', 'modal').addClass('highLight'); $(".ui-autocomplete").find("a").last().attr('href', '#modal-form').addClass('highLight'); } } ); 

I believe that you can add any additional data field other than “label” and “value”.

I am using bootstrap modal and it could be as follows:

 <div id="modal-form" class="modal fade" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="row"> </div> </div> </div> </div>