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 回答