jQuery 自动完成应用值而不是标签到文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7642855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autocomplete applying value not label to textbox
提问by Diver Dan
Im having troubles trying to get the autocomplete to work properly.
我在尝试让自动完成功能正常工作时遇到了麻烦。
It all looks ok 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 dropdown the value is been applied to the textbox instead of the label.
但是，当我从下拉列表中选择一个项目时，该值将应用于文本框而不是标签。
What have I done wrong?
我做错了什么？
If I look at the source using firebug I can see that my hidden field is being updated correctly.
如果我使用 firebug 查看源代码，我可以看到我的隐藏字段正在正确更新。
回答by Andrew Whitaker
The default behavior of the selectevent is to update the inputwith ui.item.value. This code runs afteryour event handler.
select事件的默认行为是更新inputwith ui.item.value。此代码在您的事件处理程序之后运行。
Simply return falseor call event.preventDefault()to prevent this from occurring. I would also recommend doing something similar for the focusevent to prevent ui.item.valuefrom being placed in the inputas the user hovers over choices:
只需返回false或调用event.preventDefault()即可防止这种情况发生。我还建议为focus事件做一些类似的事情，以防止在用户将鼠标悬停在选项ui.item.value上时将其放入input：
$("#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);
}
});
回答by Vlad
Just would like to add that instead of referencing input element by "id" inside selectand focuscallback functions you can use thisselector, like:
只是想添加它而不是通过“id”在选择和焦点回调函数中引用输入元素，您可以使用此选择器，例如：
$(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);
}
});
回答by Yang Zhang
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.
就我而言，我需要在隐藏输入中记录另一个字段“id”。所以我在ajax调用返回的数据中添加了另一个字段。
{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>
