1

jQuery Autocomplete を使用して、約 2000 レコードのリストから結果を表示しています。私の意見では、このリストは非常に長いため、これらすべてのレコードを検索するには適切なフィルターが必要です。

ラベル フィールドだけでなく、値フィールドでも検索できるように、ソースを修正しました。私が今欲しいのは、「Samsung Galaxy S4」を見つける「S4 galaxy」を検索できることです。標準のjqueryオートコンプリートは左から右にしか検索できないため、「galaxy s4」は見つかりますが、「s4 galaxy」は見つかりません。また、「gal s4」を見て「Samsung Galaxy S4」を見つけたいと思っています。

おまけとして、マッチを大胆にするといいですね＞「Samsung Galaxy S4」

私が現在使用している完全なコードは以下のとおりです。

var completeResults = [{
    value: "S4 iv",
    label: "Samsung Galaxy S4",
    image: "samsung_galaxy_s_iv_1.jpg"
}, {
    value: "stackoverflow",
    label: "Nokia lumia 920",
    image: "nokia_lumia_920_1.jpg"
}];

completeResults は短いリストになりました! 通常、約 2000 レコード。

function custom_source(request, response) {
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
    response($.grep(completeResults, function (value) {
        return matcher.test(value.value) || matcher.test(value.label);
    }));
}

$("#s").autocomplete({
    source: custom_source,
    minLength: 0
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    var inner_html = "<a><img src='../img/type/120x200/" + item.image + "' width='21' height='35'/><span class='title'>" + item.label + "</span></a>";

    return $("<li></li>")
        .data("item.autocomplete", item)
        .append(inner_html)
        .appendTo(ul);
};
4

1 に答える 1

2

さて、ここでうまくいくはずです（テキストの太字を除いて、それについては後で説明します）。基本的な戦略は次のとおりです。

  1. ユーザーが入力した各用語から正規表現を作成します。で入力を分割することでそれを行うことができます' '。
  2. 可能な選択肢のリスト内のすべての選択肢について、その選択肢がステップ 1 で抽出したすべての正規表現と一致するかどうかを確認します。
  3. ステップ 2 の条件を満たす値のみを返します。
function custom_source(request, response) { 
    // Create an array of regular expressions from the user's input:
    var terms = $.map(request.term.split(' '), function (term) {
        // Ignore just whitespace:
        if ($.trim(term)) {
            return new RegExp($.ui.autocomplete.escapeRegex(term), 'i');
        }
    });

    response($.grep(completeResults, function (value) {
        var found = true
            , i
            , regex;

        // For every result, iterate over every term we extracted earlier and make sure it matches:
        for (i = 0; i < terms.length && found; i++) {
            regex = terms[i];
            found = found && (regex.test(value.value) || regex.test(value.label));
        }

        return found;
    }));
}

例: http://jsfiddle.net/Aa5nK/73/

あなたの質問の他の部分は、次の質問で回答されています。

jQueryUI: Autocomplete プラグインの結果をカスタムフォーマットするにはどうすればよいですか?

于 2013-05-02T13:22:27.333 に答える