将自动填充function添加到jQuery-UI 1.8.1
这就是我现在所拥有的，遗憾的是我似乎无法弄清楚如何让autoFill与jQuery-UI一起工作……它曾经用于直接使用Autocomplete.js
var thesource = "RegionsAutoComplete.axd?PID=3" $(function () { function log(message) { $("").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()); } }); });
我后面的JSON看起来像这样
[ { "label": "Canada", "value": "Canada", "id": "1" }, { "label": "United States", "value": "United States", "id": "2" }, ]
我已经在这里使用了答案来使mustMatch正常工作，但不幸的是，如果我从输入框中“标签”或者如果我完全输入单词而不是实际选择建议的文本，我会得到“没有选择”的响应而不是价值和身份证。
当你没有真正选择字段时，有没有人知道如何从自动完成中提取id？
基本上，我正在寻找的东西类似于Month (local):在这里找到的例子： http ： //jquery.bassistance.de/autocomplete/demo/
但显然使用jQuery-UI而不是jquery.autocomplete.js
自动填充已在JQuery UI版本的自动完成中弃用，并且不再支持jquery.autocomplete插件。
这是一个github解决方案的链接。 如果您跳出字段，这将自动选择列表中的第一项，并在自动完成调用中将“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 ));
演示： http ： //jsbin.com/akile3
更新2： TAB支持！ ;）
演示： http ： //jsbin.com/akile3/8
尝试这样的事情：
不确定是否是你想要的，无论如何，如果匹配的话，它会自动填充整个单词！
$(function() { var json_source = [ { "label": "Canada", "value": "Canada", "id": "1" }, { "label": "United States", "value": "United States", "id": "2" }]; $('').insertAfter('#regions'); var $text_was = $('#hold'); var $log = $('#log'); $("#regions").autocomplete({ minLength: 3, source: json_source, open: function(event, ui) { var first_option = $('.ui-autocomplete li:eq(0) a').text(); $(this).text(first_option); $text_was.text(first_option); }, change: function(event, ui) { var prev_text = $text_was.text() ? $text_was.text() : json_source[0].value ; $log.empty(); var message = (prev_text != this.value) ? 'Nothing selected, input was ' + prev_text : 'Selected: ' + ui.item.value + ' aka ' + ui.item.id; if (prev_text != this.value) $(this).val( prev_text ); $log.append(message); }, select: function(event, ui) { $text_was.text(ui.item.value); $(this).blur(); } }).blur(function(){ if( this.value == '' ) $(this).autocomplete('search', json_source[0].value ); return false; }); });
如果您只想自动填充，这是我正在使用的代码。
$("#regions").autocomplete({ source: thesource }).live('keydown', function (e) { var keyCode = e.keyCode || e.which; //if TAB or RETURN is pressed set the value of the textbox to the text of the first suggestion if ((keyCode == 9 || keyCode == 13) && $(".ui-autocomplete").is(":visible")) { $(this).val($(".ui-autocomplete li:visible:first").text()); } });