[英]How to use javascript or jquery to achieve page search keyword function
I have a need to search for keywords in the input area, and only the matching keywords will be displayed on the page and the words will be turned red, I searched on the Inte.net and can use jquery to complete it, but I failed ~ I hope I can get your help, thank you我有一个需要在输入区搜索关键词,页面上只会显示匹配的关键词,并且会变成红色,我在互联网上搜索,可以用jquery来完成,但是我失败了~希望能得到大家的帮助,谢谢
let inputValue = document.querySelector('#keyWord').value; console.log(inputValue) $('#js-search').on('click', function() { $("p:contains(inputValue)").css('color', 'red'); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="keyWord" type="text"><button id="js-search">search</button> <ul> <li> <h1>Title</h1> <p>Here is some text you can search to display keywords, but the text in the title does not need to be marked</p> </li>ㄏ <li> <h1>Title</h1> <p>Here is some text you can search to display keywords, but the text in the title does not need to be marked</p> </li> <li> <h1>Title</h1> <p>Here is some text you can search to display keywords, but the text in the title does not need to be marked</p> </li> <li> <h1>Title</h1> <p>Here is some text you can search to display keywords, but the text in the title does not need to be marked</p> </li> </ul>
Consider the following example.考虑以下示例。
$(function() { $('#js-search').click(function() { $("p:contains(" + $('#keyWord').val() + ")").css('color', 'red'); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="keyWord" type="text"><button id="js-search">search</button> <ul> <li> <h1>Title</h1> <p>Here is some text you can search to display keywords, but the text in the title does not need to be marked</p> </li> <li> <h1>Title</h1> <p>Here is some text you can search to display keywords, but the text in the title does not need to be marked</p> </li> <li> <h1>Title</h1> <p>Here is some text you can search to display keywords, but the text in the title does not need to be marked</p> </li> <li> <h1>Title</h1> <p>Here is some text you can search to display keywords, but the text in the title does not need to be marked</p> </li> </ul>
You can use inputValue
variable if you choose, yet I do not see any advantage.如果您愿意,可以使用inputValue
变量,但我看不出有任何优势。 Also defining it before the click
event will cause it to be empty.同样在click
事件之前定义它会导致它为空。 In your code, it would execute when the page loaded not when the button was clicked.在您的代码中,它会在页面加载时执行,而不是在单击按钮时执行。 You would end up capturing the value at the wrong time.您最终会在错误的时间获取价值。
For contains
, you want to concatenate it with the value.对于contains
,您希望将其与值连接起来。 See More: :contains Selector查看更多::包含选择器
With $("p:contains(inputValue)")
the selector will look for the text inputValue
.使用$("p:contains(inputValue)")
选择器将查找文本inputValue
。 Whereas, $("p:contains(" + inputValue + ")")
will concatenate into whatever was entered as the inputValue
variable.而$("p:contains(" + inputValue + ")")
将连接到作为inputValue
变量输入的任何内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.