2013-03-25 4 views
1

자동 완성 필드가 작동하는 방식과 유사한 방식으로 작동하는 필터링 기능을 구축하려고합니다. Underscore.js를 사용하여 이름 배열을 필터링하고 있습니다. Underscore.js 필터가 모든 결과를 반환하지 않습니다.

http://jsfiddle.net/PWcVM/

오히려 JSFiddle로 이동 않은 사람들에 대한

이 여기에 일반 텍스트의 예입니다 : 여기에 문제를 보여주는 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> 

자바 스크립트 :

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

실제로 ... 나는이 대답을 받아 들일 수 있기 전에 왜 필요합니까? 그것은 실제로 그것을 고칠 수 있지만 조금 더 배경이 답변을 완료하게됩니다. –

+3

@AdamDuro [이 관련 질문보기] (http://stackoverflow.com/questions/15610251/why-pattern-testname-opposite-results-on-consecutive-calls) :'g' 수정자를 사용하면 RegExp 객체가 반복자. 'test' 함수를 사용할 때이 변경자를 사용할 이유가 없습니다. –

관련 문제