将自动填充功能添加到jQuery-UI 1.8.1

Question

这是我目前所拥有的,不幸的是我似乎无法弄清楚如何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" },
]

我已经在这里使用了答案来使mustMatch工作,但不幸的是,如果我从输入框中"标签"或者如果我完全输入单词而不是实际选择建议的文本,我会得到"没有选择"的响应而不是价值和身份证.

当你没有真正选择字段时,有没有人知道如何从自动完成中提取id？

---

基本上,我正在寻找的东西类似于在Month (local):这里找到的例子:http://jquery.bassistance.de/autocomplete/demo/

但显然使用jQuery-UI而不是jquery.autocomplete.js

Answer 1

自动填充已在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 ));