web-dev-qa-db-ja.com

jQuery UIオートコンプリートでstartsWithを使用する

ローカルデータソース（source: myArray）でjQuery UIオートコンプリートを使用しています。オートコンプリートで、デフォルトの大文字と小文字を区別しない検索ではなく、入力された文字列次で始まるの結果のみを提案する必要があります。これに対する簡単な解決策はありますか、またはカスタム検索/ソースコールバックを提供する必要がありますか？

jqueryjquery-uiautocomplete
32
Bart

現在、私はこの方法を使用していますが、より良い解決策があるかどうかはわかりません：

source: function(request, response) {
    var filteredArray = $.map(orignalArray, function(item) {
        if( item.value.startsWith(request.term)){
            return item;
        }
        else{
            return null;
        }
    });
    response(filteredArray);
},

このアプローチにより、表示するアイテムの量に制限（10アイテムなど）を課すことも可能になりました。

13
Bart

これを見てください：

マッチスタートワード：

http://blog.miroslavpopovic.com/jqueryui-autocomplete-filter-words-starting-with-term

彼はオートコンプリートフィルターメソッドをオーバーライドします。私はこれを使用し、それはうまくいきます。

// Overrides the default autocomplete filter function to search only from the beginning of the string
$.ui.autocomplete.filter = function (array, term) {
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
    return $.grep(array, function (value) {
        return matcher.test(value.label || value.value || value);
    });
};

一致する単語：

文字列内の任意のWordのstartsWithに一致します。

例えば「LHR london」は「london」と一致します

var matcher = new RegExp("\\b" + $.ui.autocomplete.escapeRegex(term), "i");

\ b Word境界で位置をアサート（^\w |\w $ |\W\w |\w\W）

28
Bumptious Q Bangwhistle

同じ方法を使用できます Jquery UI Autocomplete Examples

<script>
$("#autocompleteInputField").autocomplete({
  source: function(request, response) {
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
          response($.grep(myArray, function(item){
              return matcher.test(item);
          }) );
      }
});
</script>

[〜＃〜]または[〜＃〜]$.mapメソッドを使用する別の方法$.grep

<script>
$("#autocompleteInputField").autocomplete({
  source: function(request, response) {
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
          response($.map(myArray, function(item) {
               if (matcher.test(item)) {
                   return (item)
               }
          }));
      }
});
</script>
3
ahmed hamdy

私はJqueryuiコードに行き、そこで切り替えました。

オートコンプリートセクションを見ると、次の行が表示されます。

filter:function(a,b){var g=new RegExp(d.ui.autocomplete.escapeRegex(b),"i")

これを次のように変更します（これはグローバルな変更です）。

filter:function(a,b){var g=new RegExp("^" + d.ui.autocomplete.escapeRegex(b),"i")
2
DarrenD

大文字と小文字を区別する検索を行うには、少し異なる方法があります。 2番目の例では、正規表現の作成に「i」がないことに注意してください。これは、デフォルトの実装で大文字と小文字を区別しない原因です。

大文字小文字を区別しません：

            $('#elem').autocomplete({
                source: array
            });

大文字と小文字を区別：

            $('#elem').autocomplete({
                source: function(request, response) {
                    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term, ""));
                    var data = $.grep( array, function(value) {
                        return matcher.test( value.label || value.value || value );
                    });
                    response(data);
                }
            });
2
djs
source: function( request, response ) {
                var t = jQuery.grep(t, function(a){
                        var patt = new RegExp("^" + request.term, "i");
                        return (a.match(patt));
                    });
                response(t);
            },
1
Jamie R Rytlewski