Home > Article > Backend Development > How to use conditional queries in HTML to achieve fast search and display of data
How to use conditional queries in HTML to achieve fast search and display of data
- PHPzOriginal
- 2023-04-26 18:00:522658browse
=
HTML (Hypertext Markup Language) is a basic web page production language and one of the basic contents that constitute a web page. Conditional query is a way to obtain data that meets the requirements by querying specific conditions. This article will introduce how to use conditional queries in HTML to achieve fast search and display of data.
1. The role of HTML conditional query
When making web pages, it is often necessary to display a large amount of content, such as product information, news reports, personal introductions, etc. If all information is displayed on one page, it will not only waste space, but also cause inconvenience to users in finding the information they need. Therefore, it is necessary to embed conditional query functions in web pages so that users can only display part of the information that meets their needs.
2. Conditional query method in HTML
A common way to implement conditional query is to use JavaScript. By using the DOM (Document Object Model) in JavaScript, query functions can be easily embedded in HTML pages. The following is a basic HTML page:
<!DOCTYPE html>
<html>
<head>
<title>HTML 条件查询</title>
</head>
<body>
<input type="text" id="inputText">
<button onclick="search()">搜索</button>
<ul id="searchResult">
<li>搜索结果1</li>
<li>搜索结果2</li>
<li>搜索结果3</li>
<li>搜索结果4</li>
<li>搜索结果5</li>
</ul>
<script>
function search() {
var inputText = document.getElementById("inputText").value;
var searchResult = document.getElementById("searchResult");
for (var i = 0; i < searchResult.childNodes.length; i++) {
var text = searchResult.childNodes[i].textContent;
if (text.indexOf(inputText) == -1) {
searchResult.childNodes[i].style.display = "none";
} else {
searchResult.childNodes[i].style.display = "";
}
}
}
</script>
</body>
</html>
The above code implements a basic conditional query function. Users can enter keywords in the text box and then click the "Search" button, and the page will display only search results containing the keywords.
3. Advanced applications of HTML conditional query
In addition to basic query functions, HTML conditional query can also be applied to more complex scenarios. For example, when displaying product information, users can display different product information according to different requirements. The following is a simple example:
<!DOCTYPE html>
<html>
<head>
<title>商品展示</title>
</head>
<body>
<select id="productType">
<option value="all">全部商品</option>
<option value="book">图书</option>
<option value="music">音乐</option>
<option value="movie">电影</option>
</select>
<ul id="productList">
<li data-type="book">图书1</li>
<li data-type="book">图书2</li>
<li data-type="music">音乐1</li>
<li data-type="music">音乐2</li>
<li data-type="movie">电影1</li>
<li data-type="movie">电影2</li>
</ul>
<script>
function showProducts() {
var productType = document.getElementById("productType").value;
var productList = document.getElementById("productList");
for (var i = 0; i < productList.childNodes.length; i++) {
var type = productList.childNodes[i].getAttribute("data-type");
if (productType == "all" || productType == type) {
productList.childNodes[i].style.display = "";
} else {
productList.childNodes[i].style.display = "none";
}
}
}
document.getElementById("productType").addEventListener("change", showProducts);
</script>
</body>
</html>
The above code implements the function of displaying different product information based on product type. Users can select "All Products," "Books," "Music," or "Movies" from the drop-down menu, and the page will display only products of that type.
Summary:
HTML conditional query is an effective means to search and display page data, which can improve user experience and web page efficiency. Through the basic and advanced application methods introduced in this article, you can have a deeper understanding and application of HTML conditional queries.
The above is the detailed content of How to use conditional queries in HTML to achieve fast search and display of data. For more information, please follow other related articles on the PHP Chinese website!