4

jQuery の Tag-It プラグインが気に入っていますが、オートコンプリートに設定すると、必ずしも思い通りに動作するとは限りません。

これが例です。

私のオートコンプリート配列は、「Pink Lady Apple」、「Granny Smith Apple」、「Golden Delicious Apple」、および「Apple」で構成されています。

「アップル」と入力しても、ピンク レディ、グラニー スミス、ゴールデン デリシャスの候補にはなりません。それはAppleを示唆するだけです。これを変更して、Apple を含むが Apple で始まらないタグ​​もスキャンする方法はありますか?

4

3 に答える 3

6

同じ問題に直面していたので、@ Ravindraのヒント（+1 BTW）を使用して、プラグインをリバースエンジニアリングし、tagSource関数が何を返すかを理解できるかどうかを確認しました。

tagSource関数はブール値を返します。availableTags配列のタグがオートコンプリートリストに表示されている場合は、Trueが返されます。タグが表示されないことを示すためにFalseが返されます。

これがデフォルトのtagSource関数で、indexOfを使用して、これまでに入力されたテキストがavailableTags配列のタグの先頭と一致するかどうかを判別します。

元のデフォルトの機能：

tagSource: function(search, showChoices) {
    var filter = search.term.toLowerCase();
    var choices = $.grep(this.options.availableTags, function(element) {
       // Only match autocomplete options that begin with the search term.
       // (Case insensitive.)
       return (element.toLowerCase().indexOf(filter) === 0);
    });
    showChoices(this._subtractArray(choices, this.assignedTags()));
}

関数をコピーして.tagit関数に貼り付けたので、jQuerytagit初期化関数に渡されるパラメーターの1つとして含まれていました。次に、matchメソッドを使用するように変更しました。このメソッドは、パターンマッチングを使用して、パターンに一致する文字列の部分を返します。一致がnullを返す場合は、リストに表示しないでください。それ以外のものが返される場合は、リストにタグを表示します。

引数として渡された変更された関数：

tagSource: function(search, showChoices) {
    var filter = search.term.toLowerCase();
    var choices = $.grep(this.options.availableTags, function(element) {
       // Only match autocomplete options that begin with the search term.
       // (Case insensitive.)
       //return (element.toLowerCase().indexOf(filter) === 0);
       console.info(element.toLowerCase().match(filter) + " : " + element + " : " + filter);
       return (element.toLowerCase().match(filter) !== null);
    });
    showChoices(this._subtractArray(choices, this.assignedTags()));
}

例：

$('#tagged').tagit({
    onTagRemoved: function() {
        alert("Removed tag");
    },

    availableTags: [ "one" , "two one" , "three" , "four" , "five" ],

    // override function to modify autocomplete behavior
    tagSource: function(search, showChoices) {
        var filter = search.term.toLowerCase();
        var choices = $.grep(this.options.availableTags, function(element) {
           // Only match autocomplete options that begin with the search term.
           // (Case insensitive.)
           //return (element.toLowerCase().indexOf(filter) === 0);
           console.info(element.toLowerCase().match(filter) + " : " + element + " : " + filter);
           return (element.toLowerCase().match(filter) !== null);
        });
        showChoices(this._subtractArray(choices, this.assignedTags()));
    }
});
于 2012-02-21T23:08:59.010 に答える
4

Tag-itのtagSourceプロパティで機能しています。http://aehlke.github.com/tag-it/を使用しています

于 2012-01-27T13:12:27.090 に答える
0

Tag-It は wai-aria 実装からオートコンプリートを継承しています。これは、デフォルトで 3 つの状態のみを認識します。

なし - まったく完了していません
インライン - 次で始まる
リスト - 利用可能なすべて

そのため、tag-it を拡張してオートコンプリートへの別のアプローチを使用しない限り、これは不可能です。

WAI-ARIA の詳細については、こちらをご覧ください。

http://www.w3.org/WAI/intro/aria

http://test.cita.illinois.edu/aria/

于 2011-07-27T12:29:59.643 に答える