Home > Article > Web Front-end > How to use HTML, CSS and jQuery to implement search functions within web pages
How to use HTML, CSS and jQuery to implement search functions within web pages
- PHPzOriginal
- 2023-10-25 11:38:101377browse
How to use HTML, CSS and jQuery to implement search functions within web pages
Introduction:
With the rapid development of the Internet, search engines have become the first choice for people to obtain information. important way. However, in some cases, we may need to implement a search function within a specific web page so that users can quickly find what they want. This article will introduce how to use HTML, CSS and jQuery to implement the search function within the web page, and give specific code examples.
1. HTML part code:
First, we need to use HTML to build the basic web page structure, and add a search box and an area for displaying search results. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页内搜索功能</title>
<style>
/* CSS样式代码在下一部分给出 */
</style>
</head>
<body>
<div class="search-container">
<input type="text" id="search-input" placeholder="请输入关键字...">
<button id="search-button">搜索</button>
</div>
<div id="search-results">
<!-- 搜索结果显示在这里 -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
/* jQuery代码在下一部分给出 */
</script>
</body>
</html> 2. CSS part code:
Next, we need to use CSS to beautify the style of the search box and search results area. The code is as follows:
.search-container {
text-align: center;
margin-top: 20px;
}
#search-input {
width: 300px;
height: 40px;
font-size: 16px;
padding: 5px 10px;
border: none;
border-radius: 4px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
outline: none;
}
#search-button {
width: 80px;
height: 40px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
margin-left: 10px;
cursor: pointer;
}
#search-results {
margin-top: 20px;
} 3. jQuery part code:
Finally, we use jQuery to implement the search function. The code is as follows:
$(document).ready(function() {
$("#search-button").click(function() {
var keyword = $("#search-input").val(); // 获取搜索关键字
// 遍历网页内的所有要搜索的元素，并将匹配到的结果显示在搜索结果区域
$("p, h1, h2, h3, h4, h5, h6").each(function() {
var text = $(this).text(); // 获取元素的文本内容
if (text.includes(keyword)) {
$(this).css("background-color", "yellow");
} else {
$(this).css("background-color", ""); // 清除之前匹配到的元素的背景颜色
}
});
});
});Code explanation:
- First, we write the code in the $(document).ready() function to ensure that the page is loaded before executing.
- When the search button is clicked, we get the keywords in the search box, and then use the each() function to traverse all the elements to be searched (assuming here that the elements to be searched are titles and paragraphs in the page).
- For each element, we obtain its text content through the text() function, and use the includes() function to determine whether it contains keywords.
- If the keyword is included, we set the background color to yellow through the css() function, indicating that the result is matched; if the keyword is not included, we clear the background color of the previously matched element.
Summary:
Through the combination of HTML, CSS and jQuery, we can easily implement the search function within the web page. Users can enter keywords in the search box, and after clicking the search button, the page will highlight elements matching the keywords to help users quickly locate the content they want. The above are the usage instructions with specific code examples. I hope it will be helpful to everyone.
The above is the detailed content of How to use HTML, CSS and jQuery to implement search functions within web pages. For more information, please follow other related articles on the PHP Chinese website!