recherche

Maison  >  Article  >  développement back-end  >  Comment utiliser des requêtes conditionnelles en HTML pour obtenir une recherche et un affichage rapides des données

Comment utiliser des requêtes conditionnelles en HTML pour obtenir une recherche et un affichage rapides des données

PHPz
PHPzoriginal
2023-04-26 18:00:522657parcourir

=

HTML (Hypertext Markup Language) est un langage de base de production de pages Web et l'un des contenus de base qui constituent une page Web. La requête conditionnelle est un moyen d'obtenir des données qui répondent aux exigences en interrogeant des conditions spécifiques. Cet article explique comment utiliser les requêtes conditionnelles en HTML pour obtenir une recherche et un affichage rapides des données.

1. Le rôle de la requête conditionnelle HTML

Lors de la création de pages Web, il est souvent nécessaire d'afficher une grande quantité de contenu, comme des informations sur les produits, des reportages, des présentations personnelles, etc. Si toutes les informations sont affichées sur une seule page, cela gaspillera non seulement de l'espace, mais gênera également les utilisateurs dans la recherche des informations dont ils ont besoin. Il est donc nécessaire d’intégrer des fonctions de requête conditionnelle dans les pages Web afin que les utilisateurs ne puissent afficher qu’une partie des informations répondant à leurs besoins.

2. Méthode de requête conditionnelle en HTML

Une façon courante d'implémenter une requête conditionnelle consiste à utiliser JavaScript. En utilisant le DOM (Document Object Model) en JavaScript, les fonctions de requête peuvent être facilement intégrées dans les pages HTML. Ce qui suit est une page HTML de base : 

<!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>

Le code ci-dessus implémente une fonction de requête conditionnelle de base. Les utilisateurs peuvent saisir des mots-clés dans la zone de texte, puis cliquer sur le bouton « Rechercher ». La page affichera uniquement les résultats de recherche contenant les mots-clés.

3. Applications avancées de la requête conditionnelle HTML

En plus des fonctions de requête de base, la requête conditionnelle HTML peut également être appliquée à des scénarios plus complexes. Par exemple, lors de l'affichage d'informations sur le produit, les utilisateurs peuvent afficher différentes informations sur le produit en fonction de différentes exigences. Voici un exemple simple : 

<!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>

Le code ci-dessus implémente la fonction d'affichage de différentes informations sur le produit en fonction du type de produit. Les utilisateurs peuvent sélectionner « Tous les produits », « Livres », « Musique » ou « Films » dans le menu déroulant, et la page affichera uniquement les produits de ce type.

Résumé :

La requête conditionnelle HTML est un moyen efficace pour réaliser la recherche et l'affichage des données de page, ce qui peut améliorer l'expérience utilisateur et l'efficacité des pages Web. Grâce aux méthodes d'application de base et avancées présentées dans cet article, vous pouvez avoir une compréhension et une application plus approfondies des requêtes conditionnelles HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html 对象 dom
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Des pages Web aux images : convertir le HTML en imagesArticle suivant：Des pages Web aux images : convertir le HTML en images

Articles Liés

Voir plus