我正在使用AutoComplete UI窗口小部件进行表单,以允许用户输入客户名称.这个想法是,他们可以选择一个现有的客户,填写表单中的其他字段,或者他们可以释放一个要创建的新客户.当用户选择现有客户时,我使用select事件来填充隐藏的输入来存储与该客户相关联的ID.
我遇到的问题是如果用户首先从列表中选择一个客户,然后进入并编辑文本,实际上创建一个新的客户,我需要能够清除隐藏的输入ID值.
我引用了this SO question并创建了以下代码：
$(function() {
$("#customerName").autocomplete({
source: "/Customers/CustomerListJSON",minLength: 2,select: function(event,ui) {
$("#customerId").val(ui.item ? ui.item.Id : "");
},change: function(event,ui) {
try {
$("#trace").append(document.createTextNode(event.originalEvent.type + ","));
if (event.originalEvent.type != "menuselected")
$("#customerId").val("");
} catch (err) {
$("#customerId").val("");
}
}
});
});
问题是,变更事件在模糊时触发,所以如果用户选择了一个客户,隐藏的输入值就会被填充,但是一旦将焦点移离输入框,它就立即被清除.但是,如果我从event.originalEvent.type测试中排除了模糊事件,则隐藏字段的值永远不会在用户编辑先前选择的值的原始场景中重置.
有没有人必须解决这个问题,如果是这样,可以提供一些关于如何管理隐藏的输入值的指导,只有当从列表中选择一个项目并用任何其他值清除时,它才会被填充？
解决方法
看起来我自己很快就解决了这个问题.参考
JQuery UI wiki,更改事件中的ui项目在select事件中是相同的,所以我可以修改我的代码,如下所示：
$(function() {
$("#customerName").autocomplete({
source: "/Customers/CustomerListJSON",ui) {
$("#customerOrganizationId").val(ui.item ? ui.item.Id : "");
},ui) {
$("#customerOrganizationId").val(ui.item ? ui.item.Id : "");
}
});
});
没有必要测试事件,只是为了在ui参数中是否有项目.选择事件中的ID设置可能是多余的,但要安全,我将保留两者.
