web-dev-qa-db-ja.com

jQuery UIオートコンプリートで「mustMatch」と「selectFirst」を実装する方法は？

最近、いくつかのAutocompleteプラグインを bassistance によって生成されたものから jQuery UI autocomplete に移行しました。

コアのオートコンプリートコード自体を変更せずに、コールバックとその他のオプションだけで「mustMatch」と「selectFirst」を実装するにはどうすればよいですか？

jqueryjquery-uiautocomplete
38
dochoffiday

私は両方の機能を解決したと思います...

物事を簡単にするために、私は一般的なカスタムセレクターを使用しました：

$.expr[':'].textEquals = function (a, i, m) {
    return $(a).text().match("^" + m[3] + "$");
};

残りのコード：

$(function () {
    $("#tags").autocomplete({
        source: '/get_my_data/',
        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('');
            }
        }
    }).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());
        }
    });
});

オートコンプリート候補に正規表現で使用される「特殊」文字が含まれている場合は、カスタムセレクターのm [3]内でそれらの文字をエスケープする必要があります。

function escape_regexp(text) {
  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}

カスタムセレクターを変更します：

$.expr[':'].textEquals = function (a, i, m) {
  return $(a).text().match("^" + escape_regexp(m[3]) + "$");
};
40
dochoffiday

私はmustMatchにこれと同じくらい簡単なものを使用しましたが、うまくいきます。誰かのお役に立てば幸いです。

        change: function (event, ui) {
            if (!ui.item) {
                 $(this).val('');
             }
        }
34
Anonymous

私はmustMatchがこのコードで動作していると思います...しかし、徹底的なテストが必要です：

<script type="text/javascript">
    $(function() {
        $("#my_input_id").autocomplete({
            source: '/get_my_data/',
            minChars: 3,
            change: function(event, ui) {
                // provide must match checking if what is in the input
                // is in the list of results. HACK!
                var source = $(this).val();
                var found = $('.ui-autocomplete li').text().search(source);
                console.debug('found:' + found);
                if(found < 0) {
                    $(this).val('');
                }
            }
        });
    });
</script>
3
Esteban Feldman

この質問は役に立ちました。

私は現在使用しているコードを投稿すると思いました（ Esteban Feldmanの回答 から転載）。

テキストボックスの値をリセットする前に、独自のmustMatchオプションと問題を強調するためのCSSクラスを追加しました。

       change: function (event, ui) {
          if (options.mustMatch) {
            var found = $('.ui-autocomplete li').text().search($(this).val());

            if (found < 0) {
              $(this).addClass('ui-autocomplete-nomatch').val('');
              $(this).delay(1500).removeClass('ui-autocomplete-nomatch', 500);
            }
          }
        }

[〜＃〜] css [〜＃〜]

.ui-autocomplete-nomatch { background: white url('../Images/AutocompleteError.gif') right center no-repeat; }
2
GordonB

私が 'mustMatch'を実装するために使用したソリューション：

<script type="text/javascript">
...

$('#recipient_name').autocomplete({
    source: friends,
    change: function (event, ui) {
        if ($('#message_recipient_id').attr('rel') != $(this).val()) {
            $(this).val('');
            $('#message_recipient_id').val('');
            $('#message_recipient_id').attr('rel', '');
        }
    },
    select: function(event, ui) {
        $('#message_recipient_id').val(ui.item.user_id);
        $('#message_recipient_id').attr('rel', ui.item.label);
    }
}); 

...
</script>
1
varelse

多分これは古い問題であるからかもしれませんが、最も簡単な解決策はすでにプラグインにあることがわかりました、それにアクセスするには適切な関数を使用する必要があるだけです。

このコードは、オートコンプリートが無効な値でフォーカスを失った場合を処理します。

change: function(e, ui) {
    if (!ui.item) {
        $(this).val("");
    }
}

そして、このコードは、ベーシスタンスの元の機能とよく似ており、オートコンプリートの入力中に一致するものがなかった場合の処理​​を行います。

response: function(e, ui) {
    if (ui.content.length == 0) {
        $(this).val("");
    }
}

これは、静的配列ソースまたはJSONデータソースのどちらでもうまく機能します。 autoFocus: trueオプションと組み合わせると、効率的な方法で必要なすべてを実行するように見えます。

処理する最後のケースは、テキストボックスに無効な値を指定してESCAPEキーを押した場合の処理​​です。私が行うことは、最初に一致した結果の値を使用することです。これが私のやり方です...

最初に、最適な一致を保持する変数を宣言します。これは、オートコンプリートプラグインの外で行います。

var bestMatch = "";

次に、次のオプションを使用します。

open: function(e, ui) {
    bestMatch = "";

    var acData = $(this).data('uiAutocomplete');
    acData.menu.element.find("A").each(function () {
        var me = $(this);

        if (me.parent().index() == 0) {
            bestMatch = me.text();
        }
    });
}

最後に、次のイベントをオートコンプリートに追加します。

.on("keydown", function(e) {
    if (e.keyCode == 27)        // ESCAPE key
    {
        $(this).val(bestMatch);
    }
})

エスケープキーを押すと、フィールドを強制的に空にすることができます。 bestMatch変数ではなく、キーが押されたときに値を空の文字列に設定するだけです（フィールドを空にすることを選択した場合、これはまったく必要ありません）。

1
Randy Cleary

1つの問題を発見しました。提案リストがアクティブな間は、値が提案と一致しなくてもフォームを送信できます。これを拒否するには、私は追加しました：

$('form').submit(function() {
        if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
            $(this).val('');
            $("span").text("Select a valid city").show();
            return false;
        }
});

これにより、フォームが送信されなくなり、メッセージが表示されます。

1
CyberJunkie

Scott GonzalezがjQueryUI AutoComplete用に selectFirst extension （およびその他いくつか）を記述しました。

0
JCobb

受け入れられた回答に基づいて：

私の追加要件：複数のオートコンプリート、不自然なエラー検証。

change: function () {
    var target = $(this),
        widget = target.autocomplete('widget'),
        cond = widget.find('li:textEquals("' + target.val() + '")').length === 0;

    target.toggleClass('input-validation-error', cond);
}
0
Tim Vermaelen

返信は遅くなりますが、誰かを助けるかもしれません！

オートコンプリートウィジェットの2つのイベントを検討する

1）変更-フィールドがぼやけて値が変更されたときにトリガーされます。

2）応答-検索が完了し、メニューが表示されたときにトリガーされます。

変更イベントと応答イベントを次のように変更します。

change : function(event,ui)
{  
if(!ui.item){
$("selector").val("");
}
},

response : function(event,ui){
if(ui.content.length==0){
  $("selector").val("");
}
}

お役に立てれば！

0
RishikeshD

特定の用語の結果の数がゼロの場合は、結果をキャッシュし、テキストフィールドをクリアして、少し異なります。

<script type='text/javascript'>
function init_autocomplete( args )
{
     var resultCache = {};
     var currentRequestTerm = null;

     var closeCallback = function()
     {
         // Clear text field if current request has no results
         if( resultCache[currentRequestTerm].length == 0 )
             $(args.selector).val('');
     };

     var sourceCallback = function( request, responseCallback )
     {
         // Save request term
         currentRequestTerm = request.term;

         // Check for cache hit
         // ...
         // If no cache hit, fetch remote data
         $.post(
             dataSourceUrl,
             { ...  }, // post data
             function( response )
             {
                 // Store cache
                 resultCache[request.term] = response;

                 responseCallback( response );
             }
     };

     $(args.selector).autocomplete({
         close:  closeCallback,
         source: sourceCallback
     });
}
</script>
0
Sam

ここでは、「mustMatch」要件の簡単で決定的な解決策を示します。

<script type="text/javascript">
    $(function() {
        $("#my_input_id").autocomplete({
            source: '/get_my_data/',
            minChars: 3,
            select: function(event, ui) {
                // custom code
                $(this).data("pre-ui-autocomplete-value", $(this).val());
            }
        }).on("focus", function () {
            $(this).data("pre-ui-autocomplete-value", $(this).val());
        }).on("blur", function () {
            $(this).val($(this).data("pre-ui-autocomplete-value"));
        });
    });
</script>
0
F. Terenzi