自动完成应用值不标签到文本框
我有麻烦试图让自动完成工作正常。
这一切看起来不错，但是…
<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") 但是，当我从下拉列表中select一个项目时，该值已应用于文本框而不是标签。
我做错了什么？
如果我看着使用萤火虫的来源，我可以看到我的隐藏领域正在更新正确。
select事件的默认行为是用ui.item.value更新input 。 此代码在您的事件处理程序后运行。
只需返回false或调用event.preventDefault()来防止发生这种情况。 我也build议为focus事件做类似的事情，以防止ui.item.value被放置在input因为用户在select上hover：
$("#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); } });
例如： http : //jsfiddle.net/andrewwhitaker/LCv8L/
只是想添加，而不是通过select和焦点callback函数中的“ID”引用input元素，你可以使用这个select器，如：
$(this).val(ui.item.label);
当您为多个元素分配自动完成时，也就是通过类，它是很有用的：
$(".className").autocomplete({ ... focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label); } });
在我的情况下，我需要在隐藏的input中logging另一个字段“ID”。 所以我在从ajax调用返回的数据中添加另一个字段。
{label:"Name", value:"Value", id:"1"}
并在列表底部添加了“创build新的”链接。 点击“创build新的”，一个模式将popup，你可以从那里创build新的项目。
$('#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'); } } );
我认为重点是您可以添加除“标签”和“值”之外的任何额外数据字段。
我使用bootstrap模式，它可以如下所示：
<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>
