1

Jquery UI Combobox autocomplete widgetがあり、検索結果を並べ替えるマッチャー関数を作成しようとしています。私は好ましい結果を得ようとしています:

たとえば、入力するとき。結果は次のようにソートする必要があります。

  • ロンドン_
  • ボロニャ_ _
  • バルセロナ_ _

最初に入力された文字に一致する用語の場合は最初に表示され、文字を含む用語の場合は最初のルールの後に表示されます。

私は似たようなものを見つけましたが、それを機能させることはできません。このソリューションでは、マッチャー変数とターム変数の間の関係を確立する方法が見つかりません。

コンボボックスオリジナル

source: function( request, response ) {
              // match by first letters in search term
              var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex(request.term), "i" ); 
              response( select.children( "option" ).map(function() {
                var text = $( this ).text();
                if ( this.value && ( !request.term || matcher.test(text) ) )
                  return {
                    label: text.replace(
                      new RegExp(
                        "(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"
                      ), "<strong>$1</strong>" ),
                    value: text,
                    option: this
                  };
              }) );
            },

jquery ui オートコンプリートのソリューション

$(document).ready(function () {
    // my source is in html
    var source = ['Adam', 'Benjamin', 'Matt', 'Michael', 'Sam', 'Tim'];
    $("input").autocomplete({
        source: function (request, response) {
            var term = $.ui.autocomplete.escapeRegex(request.term)
                , startsWithMatcher = new RegExp("^" + term, "i")
                , startsWith = $.grep(source, function(value) {
                    return startsWithMatcher.test(value.label || value.value || value);
                })
                , containsMatcher = new RegExp(term, "i")
                , contains = $.grep(source, function (value) {
                    return $.inArray(value, startsWith) < 0 &&
                        containsMatcher.test(value.label || value.value || value);
                });

            response(startsWith.concat(contains));
        }
    });
});

私が見つけた同様の回答へのリンク

JSフィドル

可能な限りのフィードバックをいただければ幸いです。

ありがとうございました。

4

1 に答える 1