向 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>

").text(message).prependTo("#log");$("#log").attr("scrollTop", 0);}$.expr[':'].textEquals = function (a, i, m) {return $(a)​​.text().match("^" + m[3] + "$");};$("#regions").自动完成({来源:thesource,更改:功能(事件，用户界面){//如果文本框的值与建议不匹配，则清除其值if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {$(this).val('');}别的 {//这目前不是记录"UI"数据//如果用户没有明确选择//建议的文本//请帮忙！！！log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "没有选择，输入是" + this.value);}}}).live('keydown', function (e) {var keyCode = e.keyCode ||e.哪个；//如果按下TAB或RETURN并且文本框中的文本与建议不匹配，则将文本框的值设置为第一个建议的文本if ((keyCode == 9 || keyCode == 13) && ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0)) {$(this).val($(".ui-autocomplete li:visible:first").text());}});});

My JSON in the back end looks like this

我在后端的 JSON 是这样的

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

我使用了答案此处 使 mustMatch 工作，但不幸的是，如果我从输入框tab"离开，或者如果我完全输入单词而不是实际选择建议的文本，我会得到没有选择"响应而不是值和 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

But obviously using the jQuery-UI instead of the jquery.autocomplete.js

推荐答案

AutoFill 在自动完成的 JQuery UI 版本中已被弃用，不再支持 jquery.autocomplete 插件.

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

这里是一个链接到 github 解决方案. 如果您退出该字段，这将自动选择列表中的第一项，并将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屋！