Ajax에서 searchbox를 사용하여 목록에서 데이터를 강조 표시하는 방법

Question

내 프로젝트의 데이터베이스 데이터로 채워진 searchbox 및 div 목록이 있습니다. 아이디어는 searchbox에 무언가를 입력하면 호환 결과가 div 목록에서 강조 표시되거나 선택됩니다. codeigniter에서 ajax 또는 jquery를 사용하여 가능합니까? 감사합니다. 좋은 하루 되세요!

Answer 1

여기가 원하는 것입니다.

JsFiddle는 :http://jsfiddle.net/vEACM/1/

HTML :은 입력 seach 필드에 search-field 클래스를 추가 할 수 있습니다.

CSS : 당신의 CSS 시트이 규칙을 추가 .highlight{background-color:yellow;}

자바 스크립트

$(function() { 
    $('.search-field').on('keyup blur change', function() { 
     var text_s = $(this).val(); 

     //Clean all by remowing eventual highlight classes already added 
     $("li").removeClass("highlight"); 

     //Only react when a text is in the field 
     if (text_s.length > 0){ 
      $("li").each(function(){ 
       var li_value = $(this).text(); 
       if (li_value.indexOf(text_s) >= 0){ 
        //If the li_value contains the text, add a class to highlight 
        //the li element 
        $(this).addClass("highlight"); 
       } 
      }); 
     } 
    }); 
}); 

/\로드하는 데 사용되는 jQuery를 버전 (버전 1.8.3을 잊지 마세요! 당신이 때 짝수 요소를 강조하려는 경우 : 참고

)를 jsFiddle에서 case가 그것을 허용하지 않는다면, 코드가 text_s와 li_value의 값을 검색 할 때 단순히 .toLowerCase()를 사용하십시오. 예 : var text_s = $(this).val().toLowerCase();

Answer 2

검색 창을 사용하는 중에 추천 목록을 찾으려면 this jQuery Plugin을 사용해보십시오. AJAX로 jQuery Autocomplete를 구현하는 방법에 대해 this 질문을 확인하십시오.