向jQuery-UI 1.8.1添加自动填充功能 [英] Add autoFill capabilities to jQuery-UI 1.8.1

问题描述

这是我目前拥有的东西，不幸的是，我似乎无法弄清楚如何使autoFill与jQuery-UI一起使用...它曾经与纯正的Autocomplete.js一起使用

here's what I currently have, unfortunately I cannot seem to figure out how to get autoFill to work with jQuery-UI... It used to work with the straight up 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看起来像这样

My JSON in the back end looks like this

[
    { "label": "Canada", "value": "Canada", "id": "1" },
    { "label": "United States", "value": "United States", "id": "2" },
]

我在此处 a>使mustMatch正常运行，但是不幸的是，如果我在输入框中跳格"，或者如果我完全键入单词而不是实际选择建议的文本，则将得到未选择任何内容"响应，而不是值和ID.

I've used the answer here to get the mustMatch working, but unfortunately if I "tab" away from the input box or if I type the word completely rather than actually selecting the suggested text, I get the "Nothing selected" response instead of an Value and ID.

当您没有真正选择字段时，有人知道如何从自动完成功能中提取ID吗?

Does anyone know how to extract the id out of the autocomplete when you don't actually select the field?

基本上，我要寻找的是与在此处找到的Month (local):示例相似的东西: http://jquery.bassistance.de/autocomplete/demo/

Basically, What I'm looking for is something similar to the Month (local): example found HERE: http://jquery.bassistance.de/autocomplete/demo/

但显然使用 jQuery-UI 代替 jquery.autocomplete.js

推荐答案

JQuery UI版本的自动完成功能已弃用自动填充功能，并且不再支持jquery.autocomplete插件.

AutoFill has been deprecated in the JQuery UI version of autocomplete, and the jquery.autocomplete plugin is no longer supported.

此处是链接.如果您跳出该字段，则会自动选择列表中的第一项，并在自动完成调用中将"selectFirst:true"设置为选项.

Here is a link to a github solutiuon. This will automatically select the first item in the list if you tab out of the field, and have "selectFirst: true" set as an option on your autocomplete call.

(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-UI 1.8.1添加自动填充功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！