자동 완성 전체 결과보기

Question

페이지를 format.json에서 수집하십시오. JS에서

나는이 : 자동 완성에 대한

$('input[name="q"]').autoComplete({ 
    source: function(term, response){ 
     $.getJSON('/search.json', { q: term }, function(data){ response(data); }); 
    } 
}); 

내가이 plugin를 사용합니다.

출력에 대한 책임은 무엇입니까?

나는 모든 이름을 자동 완성 드롭에 넣었습니다. 빠지기 만하면됩니다. 일치하는 항목 만 삭제할 필요가 있습니다.

.indexOf(term)에 대한 책임은 무엇입니까? 무엇을 사용할 것인가?

화면

모든 (성냥을 가지고 경기를하지 않는 사람들) 결과를 보여줍니다. 일치하는 사람 만 볼 필요가 있습니다.

Answer 1

JSON 파일에서 데이터를 가져오고 있으므로 클라이언트 측에서 필터링을 수행해야합니다. 서버에 대한 실제 AJAX 요청과 함께 작동하는 방식으로, 서버에서 필터링을 수행하여 필요한 데이터 만 반환합니다 (쿼리 용어를 매개 변수로 보내는 이유).

$('input[name="q"]').autoComplete({ 
    source: function (term, response) { 
     $.getJSON('/search.json', function (data) { 
      term = term.toLowerCase(); 
      var matches = []; 
      for (i = 0; i < data.length; i++) 
       if (~data[i].toLowerCase().indexOf(term)) matches.push(data[i]); 
      response(matches); 
     }); 
    } 
}); 

당신은 당신의 data 구조가 어떻게 생겼는지에 따라 뭔가 다른 일을해야하지만 이 있으리라 믿고있어 그것의 배열입니다 :

그래서 당신은 다음과 같이 당신의 코드를 변경해야합니다 당신이 당신의 일치를 제한하려면 문자열

편집

당신은 루프 대신에 그것을 할 수 있습니다 마지막 줄, 성능이 좋으면 5 번 일치하면 루프가 필요 없으므로

$('input[name="q"]').autoComplete({ 
    source: function (term, response) { 
     $.getJSON('/search.json', function (data) { 
      term = term.toLowerCase(); 
      var matches = []; 
      for (i = 0; i < data.length; i++) 
       if (~data[i].toLowerCase().indexOf(term) && matches.length == 4) { 
        matches.push(data[i]); 
        break; 
       } 
      response(matches); 
     }); 
    } 
});