这是我目前拥有的东西,不幸的是,我似乎无法弄清楚如何autoFill使用jQuery-UI …它曾经与直接的Autocomplete.js一起使用
autoFill
<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" }, ]
我使用了这里的答案来使mustMatch正常工作,但是不幸的是,如果我在输入框中“跳格”,或者如果我完全键入单词而不是实际选择建议的文本,那么我会得到“没有选择”响应,而不是值和ID。
当您实际上没有选择字段时,有人知道如何从自动完成中提取ID吗?
基本上,我正在寻找的东西与Month (local):此处找到的示例相似:http : //jquery.bassistance.de/autocomplete/demo/
Month (local):
但显然使用 jQuery-UI 而不是 jquery.autocomplete.js
AutoFill在自动完成的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 ));