jqueryのオートコンプリートコードで非常に不満なバグが発生しました。私は小さな図書館プロジェクトのための本カタログに取り組んでいます。オートコンプリートは、ユーザーが件名タグまたはタイトルで検索する際に役立ちます。ここでjQueryオートコンプリートですべての一致が表示されない
が問題に焦点を当てるためのコード(現在$(document).ready();
上で実行されている)
var autoData = [];
$.get('/search_bar', function(data){
autoData = $.makeArray(data);
console.log(autoData);
});
$("#search").autocomplete({
source: function(req, responseFn){
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp("(?:^|)" + re, "gi");
var a = $.grep(autoData, function(item, index){
return matcher.test(item);
});
responseFn(a);
},
minLength: 2
});
だ、私はすべての出発で返されるべき3つのタイトルの集合にサーバからの応答を制限されてきました
console.log(autoData) => ["Pages africaines 1", "Pages africaines 2", "Pages africaines 3"]
しかし、jQueryのオートコンプリートが唯一の示唆 "PAGを...." と入力して、ではなく、 "ページが3 africaines" "ページが1 africaines"(私が期待するよう) "ページがafricaines 2" だけでなく、タイトル全体を「Pages africaines 2」とタイプしない限り(その時点では、予想通りの唯一の提案です)。
私は上記の配列に対してgrep正規表現/ $をテストしてみた、正常に動作するようです:。
autoData = ["Pages africaines 1", "Pages africaines 2", "Pages africaines 3"]
$.grep(autoData, function(item, index){ return RegExp("(?:^|)pages", "gi") })
=> ["Pages africaines 1", "Pages africaines 2", "Pages africaines 3"]
任意の洞察力を? $.get()
は(私はデバッグに、上記の例にオートコンプリートを制限されてきた)私のレールのバックエンドからJSONエンコード応答、例えば:
def search_bar
output = Book.search('pages').map{|bt| bt.title }
render :json => output.to_json
end
を受けます。しかし、Chromeのjavascriptコンソールでは、autoDataは間違いなく期待どおりの配列オブジェクトです。
ありがとうございます!
(注: "\ b"のような単語境界の代わりに "(?:^ |)"を使って上記のRegExpを使用しているのは、タイトルにUnicode/
はどうもありがとうございました!私はそれを捕まえたことはないだろう。なぜそれがたまにしかうまくいかなかったのかのヒント? (私は、この機能を私がアプリを構築している人にデモンストレーションしようと恥ずかしがらず試したので、問題に気づいただけです)。 –