我在尝试让自动完成功能正常工作时遇到了麻烦。
在我看来一切都还好,但是...
<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查看源代码,我可以看到我的隐藏字段正在正确更新。
发布于 2015-06-15 19:56:39
在我的例子中,我需要在隐藏输入中记录另一个字段'id‘。因此,我在ajax调用返回的数据中添加了另一个字段。
{label:"Name", value:"Value", id:"1"}
并且在列表的底部添加了一个“创建新的”链接。点击“创建新的”,将弹出一个模式,你可以从那里创建新的项目。
$('#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');
}
}
);
我认为重点是你可以添加任何额外的数据字段,而不仅仅是'label‘和'value’。
我使用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>
https://stackoverflow.com/questions/7642855
复制相似问题