2011-10-30 7 views
9

전체적으로 JS에 서버 백엔드가 없습니다. 사용자가 검색 한 다음 일치하는 이름 목록을 표시 할 수있게해야합니다. jQuery UI AutoComplete를 사용하고 있지만 결과를 필터링하려면 JS가 필요합니다. 보 같은 검색어 감안할 때JS/jQuery를 사용하여 문자열 검색/퍼지 일치 작업 수행 하시겠습니까?

Bob Hope 
James Jones 
Steve Jobs 
Larry McBridge 

가 어떻게 그냥 밥 호프는 나 같은 검색어 감안할 때

을 반환받을 수 있습니다 :

이름의 배열을 지정해,

제임스 존스를 제외한 모든 사람들을 어떻게 도울 수 있습니까?

두 문자열 비교를위한 간단한 JS? 감사합니다

+0

앞으로의 독자들에게이 라이브러리를 구현했습니다. http : // g ithub.com/uohzxela/fuzzy-autocomplete – uohzxela

+0

@uohzxela - 나 자신을 위해서, 나는 도서관을 사용하는 것을 피하기 위해 여기에왔다. 또한, 당신의 히트를 빨리 훑어 보면 매우 구체적인 유스 케이스를 만들었고 많은 개발자에게 도움이되지는 않을 것입니다 – vsync

답변

7
var names = ["Bob Hope","James Jones","Steve Jobs","Larry McBridge"] 
var query = "bo" 
var results = $(names) 
     .map(function(i,v){ 
      if(v.toLowerCase().indexOf(query.toLowerCase())!=-1){return v} 
     }).get() 

// results is ["Bob Hope"] 
+0

그래서 (stringToSearch.toLowerCase(). indexOf (stringQuery.toLowerCase())! = -1) {alert ("match"); } –

1

어쩌면 내가 (위의 답변의 복잡성을 감안할 때) 당신을 오해했지만, 나는 this을 사용하여 jQuery를 사용했습니다. 키를 누를 때마다 (입력에 포커스가있을 때마다) 페이지의 모든 li 요소를 검색하고 검색 용어가 포함되어 있는지 찾습니다. 당신의 jQuery를

<ul><li>Bob Hope</li> 
<li>James Jones</li> 
<li>Steve Jobs</li> 
<li>Larry McBridge</li></ul><br> 
Search: <input id="search" length="24" /> 

그리고 여기에 있습니다 : : 여기

는 HTML입니다

$("#search").keyup(function(){ 
    $("li").hide(); 
    var term = $(this).val(); 
    $("li:contains('" + term + "')").show(); 
}); 
0

은 이반의 답변을 사용하지만, ES6의 변화 : 이익을 위해

var names = ["Bob Hope","James Jones","Steve Jobs","Larry McBridge"]; 

function findIn(s, list){ 
    return list.filter((v) => v.toLowerCase().indexOf(s.toLowerCase()) != -1); 
} 


findIn('bo', names);