jquery에서 일치하는 용어의 텍스트를 강조 표시하는 방법은 무엇입니까?

항목 목록과 검색 상자가 있습니다. 검색어가 검색 창에 입력 된 경우 일치하는 텍스트는 대소 문자에 관계없이 목록에 굵은 글씨로 나타납니다 (대소 문자를 구분하지 않음). 나는 약간 수준까지했다 그러나 나중에 jquery에 새롭기 때문에, 나 do not는 그것을하는 방법을 모른다.jquery에서 일치하는 용어의 텍스트를 강조 표시하는 방법은 무엇입니까?

<html> 
<head> 
    <script type="text/javascript" 
      src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".SearchElement").keyup(function(){ 
      keyword = $(".SearchElement").val(); 
      if(keyword.length>=3){ 
       var content = $(".wrapperbox ul li").text(); 
       test = content.match(/keyword/gi) 
       if(test){ 
        //alert(test); 
       } 
      } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form action=""> 
     <label>SearchTerm:</label> <input type="text" 
     name="SearchBox" value="" class="SearchElement" /> 
    </form> 
    <div class="wrapperbox"> 
     <ul> 
      <li>TestString</li> 
      <li>testString</li> 
      <li>Kanigiri</li> 
      <li>KANIGIRI</li> 
     </ul> 
    </div> 
</body> 
</html>

어떻게하면 도움이 될 것입니다. 당신이

출처

2012-11-13 user964147

[이 질문에 대한 내 대답을보세요 (http://stackoverflow.com/questions/12505602/slow-highlighting -in-firefox/12505656 # 12505656). – elclanrs

미래의 검색자가이를 찾을 수 있도록 더 나은 제목을 제공하십시오. –

<html> 
<head> 
    <script type="text/javascript" 
      src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#SearchElement").keyup(function(){ 
      keyword = $("#SearchElement").val(); 
      if(keyword.length>=3){ 
       $(".wrapperbox ul li").each(function(index) { 
         var content = = $(this).text()); 
         test = content.match(/keyword/gi); 
         if (test){ 
          $(this).replaceWith("<li><b>" + $(this).text() + "</b></li>"); 
         }      
       }); 

      } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form action=""> 
     <label>SearchTerm:</label> <input type="text" 
     name="SearchBox" id="SearchBox" value="" class="SearchElement" /> 
    </form> 
    <div class="wrapperbox"> 
     <ul> 
      <li>TestString</li> 
      <li>testString</li> 
      <li>Kanigiri</li> 
      <li>KANIGIRI</li> 
     </ul> 
    </div> 
</body> 
</html>

는 기본적으로 약 바이올린 각() 루프 A 폼 입력
사용을 참조하고 그 루프 내 대체 찾기 위해 ID를 사용합니다 감사합니다 (I 약한 버전 한 - 검증되지 않은, 그리고 귀하의 코드를 기반으로, 당신을 도울)하지만 잘하면 내가 갈 곳을 볼 수

출처

2012-11-13 23:08:39 conners

답장을 보내 주셔서 감사합니다. 일치하는 텍스트 만 강조 표시해야합니다. 내가 어떻게 할 수 있니? – user964147

find/replace .. 각 루프에서'$ (this) .text = $ (this) .text.replace (keyword, ""+ keyword + ""); ' – conners

'.text()'대신'.html()'내부를 교체해야 할 수도 있습니다. – conners

jquery에서 일치하는 용어의 텍스트를 강조 표시하는 방법은 무엇입니까?

답변

관련 문제