这是我目前拥有的,不幸的是我似乎无法弄清楚如何让 autoFill
与 jQuery-UI 一起使用...它曾经与直接的 Autocomplete.js 一起使用
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.1.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var thesource = "RegionsAutoComplete.axd?PID=3"
$(function () {
function log(message) {
$("<div/>").text(message).prependTo("#log");
$("#log").attr("scrollTop", 0);
}
$.expr[':'].textEquals = function (a, i, m) {
return $(a).text().match("^" + m[3] + "$");
};
$("#regions").autocomplete({
source: thesource,
change: function (event, ui) {
//if the value of the textbox does not match a suggestion, clear its value
if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
$(this).val('');
}
else {
//THIS IS CURRENTLY NOT "LOGGING" THE "UI" DATA
//IF THE USER DOES NOT EXPLICITLY SELECT
//THE SUGGESTED TEXT
//PLEASE HELP!!!
log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
}
}
}).live('keydown', function (e) {
var keyCode = e.keyCode || e.which;
//if TAB or RETURN is pressed and the text in the textbox does not match a suggestion, set the value of the textbox to the text of the first suggestion
if ((keyCode == 9 || keyCode == 13) && ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0)) {
$(this).val($(".ui-autocomplete li:visible:first").text());
}
});
});
</script>
我的后端 JSON 看起来像这样
[
{ "label": "Canada", "value": "Canada", "id": "1" },
{ "label": "United States", "value": "United States", "id": "2" },
]
我使用了答案here为了让 MustMatch 正常工作,但不幸的是,如果我用“tab”键离开输入框,或者如果我完全键入单词而不是实际选择建议的文本,我会得到“未选择任何内容”响应,而不是值和 ID。
有人知道当您没有实际选择字段时如何从自动完成中提取 id 吗?
<小时/>基本上,我正在寻找类似于此处找到的月(本地):
示例:http://jquery.bassistance.de/autocomplete/demo/
但显然使用 jQuery-UI 而不是 jquery.autocomplete.js
最佳答案
自动填充功能在 JQuery UI 版本的自动完成功能中已被弃用,并且不再支持 jquery.autocomplete 插件。
Here is a link to a github solutiuon.如果您按 Tab 键退出该字段,并且将“selectFirst: true”设置为自动完成调用中的选项,这将自动选择列表中的第一项。
(function( $ ) {
$( ".ui-autocomplete-input" ).live( "autocompleteopen", function() {
var autocomplete = $( this ).data( "autocomplete" ),
menu = autocomplete.menu;
if ( !autocomplete.options.selectFirst ) {
return;
}
menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first() );
});
}( jQuery ));
关于jquery - 向 jQuery-UI 1.8.1 添加自动填充功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2933713/