自动完成将值而不是标签应用于文本框
自动完成将值而不是标签应用于文本框
提问于 2011-10-04 11:02:41
我在尝试让自动完成功能正常工作时遇到了麻烦。
在我看来一切都还好，但是...
<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查看源代码，我可以看到我的隐藏字段正在正确更新。
回答 1
Stack Overflow用户
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7642855
复制相关文章
相似问题