0

アイテムのリストと検索ボックスがあります。検索語が検索ボックスに入力された場合、一致したテキストは、大文字と小文字に関係なくリストに太字で表示されます (大文字と小文字は区別されません)。私はある程度までやったことがありますが、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>

どうすればそれを行うことができますか、どんな助けも大いに感謝します。ありがとうございました

4

1 に答える 1

1 
<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>
  1. ID を使用してフォーム入力を参照する
  2. each() ループを使用する
  3. 基本的には、そのループ内をいじって置換を見つけます（私は弱いバージョンを作成しました-テストされておらず、あなたのコードに基づいて、あなたを助けます）が、うまくいけば私がどこに行くのかを見ることができます
于 2012-11-13T23:08:39.093 に答える