2013-03-25 17 views
1

我正在嘗試構建一個過濾功能,其工作方式與自動完成字段的工作方式類似。我正在使用Underscore.js來過濾名稱數組。下面是一個說明該問題的的jsfiddle:Underscore.js篩選器不返回所有結果

http://jsfiddle.net/PWcVM/

對於那些誰寧願不跳的jsfiddle,這裏是純文本的例子。

HTML:

<p>Type the name 'Craig' into the text field</p> 
<input class="query" type="text" /> 
<p>There are 4 Craig's in the data array. The results below should output those 4 Craigs. For some reason, it only outputs two.</p> 
<p>Results:</p> 
<textarea class="results" style="width: 300px; height: 300px;"></textarea> 

的JavaScript:

var data = ["Aaron Abram", "Abbie Hanson", "Abraham Vázquez", "Ace Marrero", "Adam D. Chaitin", "Adam Duzey", "Adam Reichental", "Adam Scott", "Adam Smythe", "Addison McCaleb", "Ahmad Childress", "Aidas Petrulis", "Aldo Nievas", "Alex Alexapolsky", "Alexander R. Lampone", "Alexandra Elizabeth London", "Alexandra Jacobs", "Alexis Jones", "Allan Louis", "Allie Tintle", "Alyssa Wada", "Amanda Armstrong", "Amanda Olmstead", "Amber Fox", "Amber Graves", "Amy Berkin-Chavez", "Amy Buggy", "Amy Rush", "Amy Schlumberger", "Andi Dzilums", "Andre Savage", "Andrew Fryer", "Andrew Rivetty", "Angel Chavez", "Angel Lewis", "Angela Truong", "Anthony Wentzel", "Anya Estrov", "Aram Homampour", "Ariana Blumenfeld-James", "Armo Movsessian", "Ashley DeMeza", "Ashley Froschauer", "Athena Asklipiadis", "Athena Stamos", "Audryn Swigert", "Augie Sanchez", "Avi Horn", "Bali Ciri Yoman", "Bali Distinction Norman", "Barnaby Hitzig", "Betty Tran Chillino", "Bill McGovern", "Blues Bob", "Bob Cribbs", "Bob West", "Bobby DiGiacomo", "Borivoj Ivanovic", "Brad Horwitz", "Brad Ormand", "Bradley F. Cole", "Brandon Jordan", "Brandon Kosoko", "Brent Nelson", "Brett Vadset", "Brian Kubat", "Bridget Betts", "Brock Winberg", "Bryan C Dickson", "Caleb Bacon", "Carlos Carreras", "Carlos Castro", "Carlos Chávez", "Caryn Saxena", "Celina Chavanette", "Ceren Güven", "Chad Buechler", "Charles Winemiller", "Charlie Diaz", "Cheri Kingsley", "Chloe Sherman-Pepe", "Chris Hackett", "Chris Han", "Chris Laughter", "Chris Mabli", "Chris McGarry", "Chris Scott", "Chris Ueland", "Christelle Penalosa", "Christine Is Lovely", "Clark McCutchen", "Colleen Steckloff Mayo", "Cory J Thomas", "Craig Adams", "Craig Duro", "Craig Fredrics", "Craig Phelps", "Curt Bonnem", "Dalilah Rain", "Damien Nemire-Pepe"]; 

_.each(data, function (name) { 
    $('textarea.results').val($('textarea.results').val() + name + "\n"); 
}); 

$('input.query').bind('input', function (event) { 
    var pattern = new RegExp($(event.currentTarget).val(), 'gim'), 
     filteredResults = _.filter(data, function (name) { 
      return pattern.test(name) 
     }); 

    $('textarea.results').val(''); 

    _.each(filteredResults, function (name) { 
     $('textarea.results').val($('textarea.results').val() + name + "\n"); 
    }); 
}); 

我得到了一些成果回來,只是並不是所有的應該回來的結果。

任何想法我做錯了什麼?

回答

1

如果你可以擺脫RegExp的全局標誌,這應該工作。

var pattern = new RegExp($(event.currentTarget).val(), 'im'); 
+0

確實......我需要一個爲什麼我才能接受這個答案。它確實解決了這個問題,但多一點背景會使答案完整。 – 2013-03-25 06:44:02

+3

@AdamDuro查看[這個相關的問題](http://stackoverflow.com/questions/15610251/why-pattern-testname-opposite-results-on-consecutive-calls):使用'g'修飾符將RegExp對象變成一個迭代器。使用'test'函數時沒有理由使用這個修飾符。 – 2013-03-25 08:33:09