使用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上的搜索條件

回答

相關問題