使用 jquery highlight 插件在 keyup jquery 上突出显示搜索词

Question

好的，我正在尝试在我的 HTML 页面中的搜索文本框中加粗搜索词。我在这里使用 jQuery highlight 插件jQuery highlight plugin 来尝试实现这一点。我仍然不精通 jQuery，如果这听起来太愚蠢，请原谅我

问题是它只突出显示在文本框中输入的第一个字符，其余的被忽略。

1. highlight.js 可以找到here

2. 这是我的代码

   <!DOCTYPE html>
   <html>
   <head>
   <meta charset="UTF-8">
   <title>Test page for Highlight Search Terms</title>
   
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script src="highlight.js" type="text/javascript"></script>
   <script>
   $(document).ready(function(){
       $('#search').on('keyup', function(){
               $('.x').highlight($(this).val());
   
       });    
   });
   </script>
   <style type="text/css">
     .highlight {
       font-weight: bold;
     }
   </style>
   <body>
     <input type="text" id="search"></input>
      <p class="x">Highlight plugin searches through the text of given elements
       in this case to find the term (word 'highlight' in our example) to 
       highlight. When the term is found it's simply wrapped with </p>
   </body>
   </html>
   

我希望它匹配段落中文本框中的每个搜索词并将其加粗。我做错了什么？谢谢

Answer 1

每当突出显示某些内容时，它都会为您搜索的单词添加一个 span 标签。 在您的情况下，您必须取消突出显示先前突出显示的文本以删除插件添加的跨度。 您可以尝试如下。 希望它会工作

    <script>
    $(document).ready(function(){
        $('#search').on('keyup', function(){
            console.log($(this).val());
                $('.x').unhighlight();
                $('.x').highlight($(this).val());

        });    
    });
    </script>