Autocomplete applying value not label to textbox
The default behavior of the select
event is to update the input
with ui.item.value
. This code runs after your event handler.
Simply return false
or call event.preventDefault()
to prevent this from occurring. I would also recommend doing something similar for the focus
event to prevent ui.item.value
from being placed in the input
as the user hovers over choices:
$("#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); }});
Just would like to add that instead of referencing input element by "id" inside select and focus callback functions you can use this selector, like:
$(this).val(ui.item.label);
it's useful when you assign autocomplete for multiple elements, i.e. by class:
$(".className").autocomplete({... focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label); }});
In my case, I need to record another field 'id' in an hidden input. So I add another field in the data returned from ajax call.
{label:"Name", value:"Value", id:"1"}
And have added a 'create new' link at the bottom of the list. On click the 'create new', a modal will pop up and you can create new item from 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 think the point is that you can add any extra data field other than just 'label' and 'value'.
I use bootstrap modal and it can be as below:
<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>