使用jquery highlight插件突出显示关键字jquery上的搜索条件

好吧我试图从我的HTML页面中的搜索文本框中填充搜索项。我在这里使用jQuery突出显示插件jQuery highlight plugin尝试实现此目的。如果这听起来太愚蠢我仍然不精通jQuery如此赦免我使用jquery highlight插件突出显示关键字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>

我希望它从文本框每个搜索词匹配的段落和博尔登它。我不正确的是什么？谢谢

来源

2013-04-09 Joseph N.

尝试在做更多突出显示之前不要高亮该段落。 – 2013-04-09 18:40:35

谢谢工作完美！ – 2013-04-09 19:26:06

每当突出显示它正在为搜索词添加span标记时。在你的情况下，你不得不忽略先前突出显示的文本来删除由插件添加的范围。您可以尝试如下。希望它能工作

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

     });  
    }); 
    </script>

来源

2013-04-09 18:51:31

哇，你是一个救世主！非常感谢 – 2013-04-09 19:25:39

我也有解决方案！谢了，兄弟。 – 2013-05-31 13:22:36

使用jquery highlight插件突出显示关键字jquery上的搜索条件

回答

相关问题