Maison >interface Web >js tutoriel >Comment créer un champ de recherche avec des effets dynamiques en utilisant HTML, CSS et jQuery

Comment créer un champ de recherche avec des effets dynamiques en utilisant HTML, CSS et jQuery

王林original: 2023-10-25 10:28:571222parcourir

Dans le développement Web moderne, un besoin courant est de créer un champ de recherche avec des effets dynamiques. Ce champ de recherche peut afficher des suggestions de recherche en temps réel et compléter automatiquement les mots-clés au fur et à mesure que l'utilisateur les tape. Cet article présentera en détail comment utiliser HTML, CSS et jQuery pour implémenter un tel champ de recherche.

Créer une structure HTML

Tout d'abord, nous devons créer une structure HTML de base. Le code est le suivant :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态搜索框</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <h1>动态搜索框</h1>
    <input type="text" id="search-input" placeholder="请输入关键词">
    <ul id="suggestion-list"></ul>
  </div>

  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

Cette structure HTML contient un conteneur div, qui comprend un titre et une zone de saisie pour la recherche. Nous avons également créé un élément ul pour afficher les suggestions de recherche.

Écrire des styles CSS

Ensuite, nous devons écrire des styles CSS pour ajouter quelques styles de base au champ de recherche afin de le rendre plus beau. Le code est le suivant :

.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

h1 {
  font-size: 24px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

#suggestion-list {
  text-align: left;
  list-style-type: none;
  padding: 0;
  display: none;
}

#suggestion-list li {
  padding: 10px;
  background-color: #f2f2f2;
  cursor: pointer;
}

#suggestion-list li:hover {
  background-color: #e3e3e3;
}

Ces styles CSS ajoutent un style approprié au conteneur, au titre, à la zone de saisie et à la liste de suggestions de recherche pour lui donner un aspect plus professionnel.

Ajouter la fonction de suggestions de recherche

Nous devons maintenant utiliser jQuery pour implémenter la fonction de suggestions de recherche. Le code est le suivant :

$(document).ready(function() {
  $('#search-input').keyup(function() {
    var keyword = $(this).val();
    if (keyword !== '') {
      $.ajax({
        url: 'suggestion.php',
        type: 'POST',
        data: { keyword: keyword },
        success: function(data) {
          if (data.trim() !== '') {
            $('#suggestion-list').html(data).show();
          } else {
            $('#suggestion-list').html('').hide();
          }
        }
      });
    } else {
      $('#suggestion-list').html('').hide();
    }
  });

  $(document).on('click', '#suggestion-list li', function() {
    var suggestion = $(this).text();
    $('#search-input').val(suggestion);
    $('#suggestion-list').html('').hide();
  });
});

Ce code écoute d'abord les événements clavier de la zone de saisie. Lorsque l'utilisateur saisit, il utilise AJAX pour envoyer une requête à un fichier backend nommé suggestion.php et transmet les mots-clés saisis par l'utilisateur. au back-end. Le backend renverra les suggestions de recherche correspondantes, puis le frontend mettra à jour dynamiquement la liste de suggestions de recherche en fonction des données renvoyées.

Lorsque l'utilisateur clique sur un élément dans la liste de suggestions de recherche, le contenu de l'élément sera renseigné dans la zone de saisie et la liste de suggestions de recherche sera masquée.

Écrivez le code backend (suggestion.php)

Pour le code backend, nous pouvons utiliser PHP ou d'autres langages côté serveur pour l'implémenter. Ici, nous prenons PHP comme exemple pour montrer un exemple de code simple :

<?php
$keyword = $_POST['keyword'];

// 从数据库或其他数据源获取搜索建议
$suggestions = array(
  '苹果',
  '香蕉',
  '橙子',
  '草莓',
  '葡萄',
  '西瓜',
  '梨',
  '柚子'
);

$output = '';
foreach ($suggestions as $s) {
  if (strpos($s, $keyword) !== false) {
    $output .= '<li>' . $s . '</li>';
  }
}

echo $output;
?>

Ce code reçoit les mots-clés transmis par le front-end et obtient des suggestions de recherche correspondantes à partir de la base de données ou d'autres sources de données en fonction des mots-clés. Ensuite, les suggestions sont fusionnées en éléments de liste HTML au format requis et renvoyées au front-end.

Exécuter

Après avoir enregistré le code ci-dessus en tant que fichier correspondant et importé la bibliothèque CSS et JavaScript correspondante, ouvrez le navigateur et exécutez le fichier HTML, et vous verrez un champ de recherche avec des effets dynamiques.

Résumé

En utilisant HTML, CSS et jQuery, nous pouvons facilement créer un champ de recherche avec des effets dynamiques. En surveillant les entrées des utilisateurs, en envoyant des requêtes AJAX au backend pour obtenir des suggestions de recherche et en mettant à jour dynamiquement la liste de suggestions de recherche, les utilisateurs peuvent facilement sélectionner des suggestions de recherche ou saisir directement des mots-clés à rechercher. Ce champ de recherche peut être utilisé dans les fonctions de recherche de divers sites Web pour offrir aux utilisateurs une meilleure expérience.

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!

php JavaScript jquery css ajax html 事件键盘事件 ul 数据库

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：Comment utiliser HTML, CSS et jQuery pour implémenter des fonctions avancées de saisie semi-automatique de formulairesArticle suivant：Comment utiliser HTML, CSS et jQuery pour implémenter des fonctions avancées de saisie semi-automatique de formulaires

Articles Liés

Voir plus