14

ここに私が現在持っているものがありますが、残念ながら、jQuery-UIを操作する方法を理解できないようですautoFill...以前は、まっすぐな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。

実際にフィールドを選択していないときに、オートコンプリートから ID を抽出する方法を知っている人はいますか?

基本的に、私が探しているのは、ここにあるMonth (local):例に似たものです: http://jquery.bassistance.de/autocomplete/demo/

しかし、明らかにjquery.autocomplete.jsの代わりにjQuery-UIを使用しています

4

3 に答える 3

7

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 ));
于 2010-08-17T17:35:09.940 に答える
1

デモ: 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" }];

    $('<span id="hold"></span>').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;
  });
});​
于 2010-06-01T17:48:42.003 に答える
-2

単に自動入力したい場合は、これが私が使用しているコードです。

$("#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());
        }
    });
于 2010-06-10T15:04:30.240 に答える