Comment JavaScript implémente-t-il la fonction d'association de champ de recherche ?

Comment implémenter la fonction d'association de champ de recherche en JavaScript ?

Dans les applications Web modernes, le champ de recherche est un élément très courant. Les utilisateurs peuvent saisir des mots-clés dans le champ de recherche pour trouver du contenu associé. En plus de la fonction de recherche de base, la fonction Lenovo offre aux utilisateurs une expérience de recherche plus pratique. Lorsque l'utilisateur saisit un mot-clé dans le champ de recherche, le système propose automatiquement des suggestions d'association pertinentes. L'utilisateur n'a qu'à sélectionner l'une des suggestions de recherche, améliorant ainsi la précision et l'efficacité de la recherche.

Cet article expliquera comment utiliser JavaScript pour implémenter la fonction d'association de champ de recherche. Nous utiliserons une combinaison de HTML, CSS et JavaScript pour implémenter cette fonction. Vous trouverez ci-dessous un exemple de code spécifique.

Tout d'abord, nous devons créer un champ de recherche et un conteneur pour la boîte à suggestions d'association en HTML :

<input type="text" id="searchBox" placeholder="请输入关键词">
<div id="suggestionBox"></div>

Le code ci-dessus crée un élément d'entrée et un élément div comme conteneur pour la boîte à suggestions d'association.

Ensuite, nous devons utiliser CSS pour définir le style du champ de recherche et de la boîte de suggestions Lenovo :

#searchBox {
  width: 300px;
  height: 30px;
  padding: 5px;
}

#suggestionBox {
  background-color: #fff;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
}

Le code ci-dessus définit la largeur, la hauteur et le remplissage du champ de recherche, ainsi que la couleur d'arrière-plan, le style de bordure et taille maximale de la boîte à suggestions Lenovo élevée.

Maintenant, nous pouvons écrire du code JavaScript pour implémenter la fonction d'association. Tout d'abord, nous devons obtenir les éléments DOM du champ de recherche et de la boîte de suggestion Lenovo :

const searchBox = document.getElementById('searchBox');
const suggestionBox = document.getElementById('suggestionBox');

Ensuite, nous devons écouter l'événement d'entrée du champ de recherche Lorsque l'utilisateur saisit du contenu, nous obtiendrons la suggestion et l'afficherons Lenovo. dans la boîte à suggestions Lenovo :

searchBox.addEventListener('input', function() {
  const keyword = searchBox.value;
  // 根据关键词获取联想建议的数据
  const suggestions = getSuggestions(keyword);
  
  // 清空联想建议框的内容
  suggestionBox.innerHTML = '';
  
  // 将联想建议添加到联想建议框中
  suggestions.forEach(function(suggestion) {
    const suggestionItem = document.createElement('div');
    suggestionItem.textContent = suggestion;
    suggestionItem.addEventListener('click', function() {
      searchBox.value = suggestion;
      suggestionBox.innerHTML = '';
    });
    suggestionBox.appendChild(suggestionItem);
  });
});

Dans le code ci-dessus, nous avons ajouté un écouteur d'événement d'entrée à la zone de recherche via la méthode addEventListener. Lorsque l'utilisateur saisit du contenu, nous obtenons la valeur du champ de recherche et appelons la fonction getSuggestions pour obtenir les données suggérées par Lenovo. Ensuite, nous effaçons d'abord le contenu de la boîte à suggestions Lenovo, puis ajoutons la suggestion Lenovo à la boîte à suggestions Lenovo dans l'ordre.

Enfin, nous avons ajouté un écouteur d'événement de clic pour chaque élément de suggestion d'association. Lorsque l'utilisateur clique sur une suggestion d'association, nous attribuons la valeur de la suggestion au champ de recherche et effaçons le contenu de la boîte de suggestion d'association.

À ce stade, nous avons terminé la mise en œuvre de la fonction d'association de champ de recherche. Les utilisateurs peuvent désormais saisir des mots-clés dans le champ de recherche et le système proposera automatiquement des suggestions d'associations pertinentes. Les utilisateurs peuvent choisir l'une des suggestions ou continuer à saisir des mots-clés pour rechercher.

Ce qui précède est un exemple de code détaillé d'utilisation de JavaScript pour implémenter la fonction d'association de champ de recherche. J'espère que cela aide!

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!