自动完成对文本框应用值而不是标签

我有麻烦，试图得到自动完成工作正常。

在我看来一切正常，但是..。

<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")

但是，当我从下拉列表中选择一个项目时，该值被应用到文本框而不是标签。

我做错了什么？

如果我使用 firebug 查看源代码，我可以看到我的隐藏字段正在被正确更新。

83887 次浏览
小开
最佳答案

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);
}
});

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

小开

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>


提交答案