jQuery UI 自动完成用值更新隐藏字段但在 UI 中显示标签，结合 ASMX
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10035833/
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
jQuery UI autocomplete update hidden field with value but display label in UI, in conjunction with ASMX
提问by Hoppe
In the snippet below, how can I get the jquery autocomplete plugin to:
在下面的代码段中，我怎样才能让 jquery 自动完成插件：
- Update a hidden field with the UserID
- Update '#MessageTo' with the full name
- 使用 UserID 更新隐藏字段
- 使用全名更新“#MessageTo”
I believe I need to use .result, but I can't figure out the syntax. Please note that I'm using ASMX so I must do a post (don't want to enable security risk)
我相信我需要使用 .result，但我无法弄清楚语法。请注意，我使用的是 ASMX，所以我必须发帖（不想启用安全风险）
$("#MessageTo").autocomplete({
dataType: "json",
autoFocus: true,
minLength: 3,
source: function (request, response) {
var postParams = "{ pattern: '" + $("#MessageTo").val() + "' }";
return jQuery_1_7_1.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: '/Services/Users.asmx/GetNames',
data: postParams,
dataType: "json",
success: function (data) {
response($.map(data.d.Users, function (c) {
return {
label: c.FullName,
value: c.UserID
};
}));
}
});
}
});
I see some similar posts but not in conjunction with ASMX.
我看到一些类似的帖子，但不与 ASMX 结合使用。
回答by Cheeso
I believe you are interested in updating other HTML elements on the page, when the user selects something from an autocomplete-enabled textbox - is that right?
我相信您对更新页面上的其他 HTML 元素感兴趣，当用户从启用自动完成功能的文本框中选择某些内容时 - 是吗？
The code you have above probably works already, to provide autocomplete "suggestions" as the user types. If I understand correctly, You want to update a few fields after the user accepts one of the suggestion.s
您上面的代码可能已经有效，可以在用户键入时提供自动完成的“建议”。如果我理解正确，您想在用户接受建议之一后更新一些字段
To do that, use the selectmember of the autocomplete options.
为此，请使用select自动完成选项的成员。
$("#MessageTo")
.autocomplete({
dataType: "json",
autoFocus: true,
minLength: 3,
source: function (request, response) {
var postParams = "{ pattern: '" + $("#MessageTo").val() + "' }";
return jQuery_1_7_1.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: '/Services/Users.asmx/GetNames',
data: postParams,
dataType: "json",
success: function (data) {
response($.map(data.d.Users, function (c) {
return {
label: c.FullName,
value: c.UserID
};
}));
}
});
},
select: function (event, ui) {
var v = ui.item.value;
$('#MessageTo').html("Something here" + v);
$('#Hidden1').html("Something else here" + v);
// update what is displayed in the textbox
this.value = v;
return false;
}
});
Also: your use of ASMX is irrelevant. From the perspective of autocomplete, it's just a source for data. Also, the use of POST is irrelevant. It is possible to configure ASMX on the server side to allow HTTP GET. It's not a security hole if you enable it. It's just a different way of accepting requests.
另外：您对 ASMX 的使用无关紧要。从自动完成的角度来看，它只是一个数据来源。此外，POST 的使用是无关紧要的。可以在服务器端配置 ASMX 以允许 HTTP GET。如果您启用它，它就不是安全漏洞。这只是接受请求的不同方式。
The autocomplete box cannot tell if the server side is ASMX or Python, or ASP-classic, or PHP, or anything else. If I have understood the question correctly, your comment that I see some similar posts but not in conjunction with ASMXis irrelevant.
自动完成框无法判断服务器端是 ASMX 还是 Python、ASP-classic、PHP 或其他任何东西。如果我正确理解了这个问题，那么您关于我看到一些类似帖子但与 ASMX不相关的评论是无关紧要的。
回答by Rob Church
You are correct that you want to use the select configuration option - the values you want are passed to your custom function as ui.item.valueand ui.item.label. You can return falseto prevent the default behaviour and access the target element using this. i.e.
您想使用 select 配置选项是正确的 - 您想要的值作为ui.item.valueand传递给您的自定义函数ui.item.label。您可以return false阻止默认行为并使用this. IE
$("#MessageTo").autocomplete({
/* Existing code is all OK */
select: function (event, ui) {
// Set autocomplete element to display the label
this.value = ui.item.label;
// Store value in hidden field
$('#hidden_field').val(ui.item.value);
// Prevent default behaviour
return false;
}
});
