0

ここで以前に尋ねた質問に基づいて構築する

jquery ui オートコンプリートを使用してオートコンプリート フォームを作成しています。あなたの助けを借りて、コンボボックスとカテゴリオプションをうまく組み合わせることができました。今考えた後、私はそれをさらに別のレベルにしようとしています。

私がやりたいことは、コンボボックスでオプション テキストだけでなく、optgroup ラベルも検索できるようにすることです。テキストが optgroup ラベルと一致した場合、カテゴリ全体が表示されますが、オプション テキストも検索されます。

編集は下のブロックで行う必要があると思います。

 response(select.find("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,
                        category: $(this).closest("optgroup").attr("label")
                    };              
                }).get());

jsfiddle

4

1 に答える 1

0

コードの正しい部分を見つけました。カテゴリも表示される変更バージョンは次のとおりです。

response(select.find("option").map(function() {
    var text = $(this).text(),
        category = $(this).closest("optgroup").attr("label");
    if(this.value && (!request.term || matcher.test(text) || matcher.test(category))) return {
        label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
        value: text,
        option: this,
        category: category.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>")
    };
}).get());
  • オプションテキスト（matcher.test(text)）との照合に加えて、オプショングループラベルとの照合も試みます：matcher.test(category)。
  • また、カテゴリ内の一致するテキストを強調するために正規表現の置換を追加しました。

（ jsfiddleの例の更新では、この最後の変更を機能させることができませんでしたが、作業中のプロジェクトにはうまく機能します）

于 2012-07-16T16:48:24.527 に答える