2

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/

答えて

3

は交換してください:

var matcher = new RegExp("(?:^|)" + re, "gi"); 
var a = $.grep(autoData, function(item, index){ 
    return matcher.test(item); 
}); 

で:

var a = $.grep(autoData, function(item, index){ 
    var matcher = new RegExp("(?:^|)" + re, "gi"); 
    return matcher.test(item); 
}); 
+0

はどうもありがとうございました!私はそれを捕まえたことはないだろう。なぜそれがたまにしかうまくいかなかったのかのヒント? (私は、この機能を私がアプリを構築している人にデモンストレーションしようと恥ずかしがらず試したので、問題に気づいただけです)。 –

1

グローバルフラグを使用すると、エンジンはどこで検索するのかを覚えています。.testコールは、同じ引数で呼び出されたときに必ずしも同じ値を返すわけではありません。最後のインデックスの後に一致します。

もっと簡単な例:http://jsfiddle.net/gQjh6/:行うには

var regexp = /./g; 
regexp.test("a"); // true - nothing special, starting at index 0 to match 
regexp.test("a"); // false - starting at index 1, where no character is apparent 
regexp.test("a"); // true - reset; same scenario as test #1 again 

最も簡単な方法は、gフラグを削除しています。

関連する問題