Comment créer un champ de recherche HTML

2. Ajouter un bouton de soumission

Lors de la création de la fonction de recherche, nous avons également besoin d'un bouton de soumission. Une fois que l'utilisateur a saisi du texte, il doit utiliser la souris ou le clavier pour saisir et soumettre la demande de recherche. Pour le bouton de soumission, nous utilisons également l'élément de type "submit" comme indiqué ci-dessous :

<form>
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

Dans ce code HTML, nous ajoutons un élément bouton d'envoi du formulaire, l'attribut value spécifie le texte que le bouton affiche sur la page.

3. Implémentation de la fonction de recherche

Nous avons défini la structure et le style de base du champ de recherche ci-dessus, puis nous devons implémenter la fonction de recherche. La méthode la plus simple consiste à utiliser l'attribut action du HTML pour transmettre la demande du formulaire de recherche au serveur pour traitement. Par exemple, le code suivant soumettra la demande de formulaire de recherche à la page « search.php » pour traitement.

<form action="search.php">
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

Cependant, si vous n'avez pas encore de serveur ou si vous n'avez pas encore écrit de code côté serveur, vous pouvez utiliser JavaScript en HTML pour implémenter la fonction de recherche. Nous utilisons JavaScript pour écouter l'événement de clic du bouton de soumission et obtenir les informations textuelles dans la zone de saisie. L'opération spécifique est la suivante :

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索" onclick="search()">
</form>

<script>
function search() {
  var keyword = document.getElementById("searchBox").value;
  alert("正在搜索：" + keyword);
  // 实现搜索功能
}
</script>

Dans cet exemple, nous ajoutons d'abord un attribut id à l'élément afin que la référence à l'élément puisse être facilement obtenue dans le code JavaScript. Nous définissons ensuite une fonction JavaScript appelée « recherche » qui est appelée par l'événement onclick du bouton de soumission. Dans la fonction « recherche », nous obtenons la référence à la zone de saisie via document.getElementById, obtenons le mot-clé de recherche saisi dans la zone de saisie, et enfin utilisons la fonction d'alerte pour afficher le mot-clé recherché. Derrière la fonction d'alerte, nous pouvons écrire notre propre code de recherche.

4. Implémenter la fonction d'invite automatique

La fonction d'invite automatique dans la zone de recherche permet aux utilisateurs d'afficher automatiquement des suggestions de recherche pertinentes lors de la saisie de mots-clés. Cette fonctionnalité est très utile car elle aide les utilisateurs à trouver plus rapidement les informations qu’ils souhaitent. Pour implémenter la fonction d'invite automatique du champ de recherche en HTML, vous pouvez utiliser JavaScript pour l'implémenter. Par exemple, nous pouvons lier l'événement onkeyup de la zone de saisie et des suggestions de recherche pertinentes apparaîtront automatiquement pour l'utilisateur chaque fois que des caractères sont saisis dans la zone de saisie.

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入" onkeyup="showHint()">
  <input type="submit" value="搜索">
</form>

<script>
function showHint() {
  var keyword = document.getElementById("searchBox").value;
  var xmlhttp;
  if (keyword.length==0) { 
    document.getElementById("hintBox").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("hintBox").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","gethint.php?q="+keyword,true);
  xmlhttp.send();
}
</script>

Dans le code ci-dessus, nous définissons une fonction nommée "showHint", qui utilise l'objet XMLHttpRequest pour envoyer une requête get en arrière-plan afin d'obtenir des suggestions de recherche liées aux mots clés. Lorsque les suggestions de recherche sont obtenues, nous les affichons dans l'élément HTML défini avec l'identifiant "hintBox".

5. Ajouter des styles

Enfin, nous pouvons embellir l'apparence du champ de recherche grâce aux styles CSS. Par exemple, le style du champ de recherche peut être unifié en définissant la couleur d'arrière-plan, la bordure extérieure, la marge intérieure, etc. Le code est le suivant :

input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  outline: none;
}
input[type="text"]:focus {
  border-color: #369;
  box-shadow: 0 0 5px #369;
}
input[type="submit"] {
  background-color: #369;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin-left: -5px;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #258;
}

Dans le code ci-dessus, nous définissons la marge intérieure, la bordure extérieure et cercle de la zone de saisie et d'autres styles pour la rendre plus belle. En même temps, nous avons également défini une pseudo-classe :focus Lorsque la zone de saisie obtient le focus, le style de bordure sera modifié pour établir une relation avec le rendu de la boîte. Dans le style du bouton de soumission, nous définissons le changement de style lorsque la souris est survolée.

Résumé

Grâce à l'introduction de cet article, nous avons appris à utiliser HTML et JavaScript pour créer un champ de recherche et maîtrisé certaines techniques courantes, telles que les fonctions d'invite automatique et les styles d'embellissement. Le principe de mise en œuvre du champ de recherche est également le principe de mise en œuvre des hyperliens. La méthode de mise en œuvre la plus simple consiste à utiliser la fonction de soumission des éléments du formulaire HTML pour envoyer les données du formulaire au serveur pour traitement. Bien sûr, nous pouvons également utiliser des hooks JavaScript pour intercepter les données en vue d'un traitement partiel au niveau du front-end, ce qui sera souvent plus rapide, plus sûr et répondra mieux aux besoins de l'entreprise. Après avoir maîtrisé ces compétences, je pense que vos pages Web seront plus colorées.

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!