Question

好的我正在尝试从我的HTML页面中的搜索文本框中加入搜索词。我在这里使用jQuery高亮插件jQuery highlight plugin来尝试实现这一点。我仍然不擅长jQuery，所以请原谅我，如果这听起来太愚蠢了

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

可以找到highlight.js here

这是我的代码

<!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>

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

1 个答案: