Maison > Article > interface Web > Comment utiliser JavaScript pour implémenter la fonction de recherche en temps réel dans la zone de saisie de texte ?

Comment utiliser JavaScript pour implémenter la fonction de recherche en temps réel dans la zone de saisie de texte ?

PHPzoriginal: 2023-10-24 11:33:451246parcourir

如何使用 JavaScript 实现文本输入框实时搜索功能？

Avec le développement d'Internet, la fonction de recherche est devenue un élément indispensable de la conception Web. La recherche en temps réel des zones de saisie de texte est un moyen convivial de fournir rapidement des résultats pertinents au fur et à mesure que l'utilisateur tape, améliorant ainsi l'expérience utilisateur. Cet article expliquera comment utiliser JavaScript pour implémenter la fonction de recherche en temps réel de la zone de saisie de texte et fournira des exemples de code spécifiques.

Tout d'abord, ajoutez une zone de saisie de texte et un conteneur pour afficher les résultats de la recherche dans le fichier HTML. Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
  <title>实时搜索</title>
</head>
<body>
  <input type="text" id="search-input" placeholder="请输入关键字">
  <div id="search-results"></div>

<script src="script.js"></script>
</body>
</html>

Ensuite, implémentez la fonction de recherche en temps réel dans le fichier JavaScript. Le code est le suivant :

// 获取文本输入框和搜索结果容器
var input = document.getElementById('search-input');
var resultsContainer = document.getElementById('search-results');

// 监听输入框的输入事件
input.addEventListener('input', function() {
  // 清空搜索结果容器
  resultsContainer.innerHTML = '';

  // 获取输入框的值
  var query = input.value;

  // 进行搜索
  var results = search(query);

  // 展示搜索结果
  showResults(results);
});

function search(query) {
  // 这里可以使用 AJAX 请求后端接口，获取相关搜索结果
  // 在示例中，我们使用一个简单的字符串匹配方式来模拟搜索结果
  var data = ['JavaScript', 'Java', 'Python', 'HTML', 'CSS'];
  var results = [];

  for (var i = 0; i < data.length; i++) {
    if (data[i].toLowerCase().indexOf(query.toLowerCase()) !== -1) {
      results.push(data[i]);
    }
  }

  return results;
}

function showResults(results) {
  // 遍历搜索结果，并在搜索结果容器中展示
  for (var i = 0; i < results.length; i++) {
    var result = document.createElement('div');
    result.textContent = results[i];
    resultsContainer.appendChild(result);
  }
}

Analyse du code :

Tout d'abord, nous obtenons des références à la zone de saisie de texte et au conteneur de résultats de recherche via la méthode getElementById. getElementById 方法获取文本输入框和搜索结果容器的引用。
接着，通过 addEventListener 方法监听输入框的 input 事件，也就是输入内容发生改变时的事件。
在事件处理函数中，首先清空搜索结果容器，然后通过 input.value 获取输入框的值，并调用 search 函数进行搜索。
search 函数是一个简单的模拟搜索接口，它通过遍历一个存储固定数据的数组，根据输入框的值进行匹配，并返回匹配的结果数组。
最后，showResults

addEventListener

input

Dans la fonction de gestion des événements, effacez d'abord le conteneur de résultats de recherche, puis obtenez la valeur de la zone de saisie via input.value et appelez la fonction search pour rechercher. La fonction

search est une simple interface de recherche simulée. Elle parcourt un tableau qui stocke des données fixes, correspond en fonction de la valeur de la zone de saisie et renvoie un tableau de résultats correspondants.

Enfin, la fonction showResults parcourt le tableau des résultats de recherche et crée et affiche dynamiquement les résultats de la recherche dans le conteneur des résultats de recherche. 🎜🎜🎜Grâce au code ci-dessus, nous avons implémenté une simple fonction de recherche en temps réel dans la zone de saisie de texte. Lorsque l'utilisateur saisit du contenu dans la zone de saisie, la page affichera rapidement les résultats de recherche pertinents. Vous pouvez optimiser et personnaliser la logique de recherche en fonction des besoins réels, par exemple en utilisant AJAX pour demander à l'interface backend d'obtenir des données réelles ou en implémentant des algorithmes de recherche plus complexes. 🎜🎜Résumé : 🎜Cet article explique comment utiliser JavaScript pour implémenter la fonction de recherche en temps réel de la zone de saisie de texte et fournit des exemples de code spécifiques. Grâce à cette fonction de recherche en temps réel, l'expérience utilisateur peut être améliorée, permettant aux utilisateurs d'obtenir rapidement des résultats de recherche pertinents lors de la saisie de contenu. J'espère que cet article vous sera utile lors du développement de fonctions de recherche pour les pages Web. 🎜

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 ajax html 接口事件 input 算法

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：HTML, CSS et jQuery : conseils pour un défilement fluideArticle suivant：HTML, CSS et jQuery : conseils pour un défilement fluide

Articles Liés

Voir plus