Comment utiliser JavaScript pour mettre en œuvre une recherche en temps réel et mettre en évidence les résultats ?

Comment utiliser JavaScript pour mettre en œuvre une recherche en temps réel et mettre en évidence les résultats ?

Avec le développement rapide d'Internet et du Big Data, les fonctions de recherche sont devenues un élément indispensable de nombreux sites Web et applications. Les fonctions de recherche traditionnelles utilisent souvent la méthode selon laquelle les utilisateurs saisissent des mots-clés et cliquent sur le bouton de recherche, puis la page est rechargée pour afficher les résultats de la recherche. Cependant, l’expérience utilisateur de cette méthode est relativement mauvaise et les utilisateurs doivent attendre que la page se recharge pour voir les résultats. Afin d'améliorer l'expérience utilisateur, la fonction de recherche en temps réel a vu le jour.

La fonction de recherche en temps réel signifie que lorsque les utilisateurs saisissent des mots-clés, les résultats de la recherche s'affichent instantanément sans actualiser la page, et les résultats de la recherche peuvent également être mis en évidence afin que les utilisateurs puissent mieux trouver les informations dont ils ont besoin. Ci-dessous, nous présenterons comment utiliser JavaScript pour implémenter cette fonction et donnerons des exemples de code correspondants.

Tout d’abord, nous avons besoin d’une page HTML comme interface d’affichage frontale. Dans la page, nous avons besoin d'un champ de recherche et d'une zone pour afficher les résultats de la recherche. Supposons que notre champ de recherche est une balise d'entrée et que la zone qui affiche les résultats de la recherche est une balise div, et que leurs identifiants sont respectivement "searchInput" et "searchResults". Le code est le suivant :

<input type="text" id="searchInput" placeholder="输入关键字">
<div id="searchResults"></div>

Ensuite, nous pouvons utiliser JavaScript pour écouter l'événement d'entrée du champ de recherche et traiter les mots-clés saisis pour la recherche. Nous pouvons utiliser l'événement input pour surveiller l'événement d'entrée de la zone de saisie. En surveillant cet événement, nous pouvons implémenter la fonction de recherche en temps réel. Le code ressemble à ceci :

var searchInput = document.getElementById('searchInput');
var searchResults = document.getElementById('searchResults');

searchInput.addEventListener('input', function() {
  var keyword = searchInput.value.trim(); // 获取输入的关键字并去除首尾空格

  // 调用搜索函数，传入关键字，并将搜索结果显示在页面上
  showSearchResults(keyword);
});

Nous avons maintenant besoin d'une fonction de recherche pour traiter les mots-clés saisis et renvoyer les résultats de recherche correspondants. Dans cette fonction de recherche, nous pouvons utiliser les requêtes Ajax pour envoyer des requêtes au backend et obtenir les résultats de la recherche. Par souci de simplicité, nous simulons simplement une fonction de recherche, en supposant qu'il s'agit d'une fonction asynchrone et qu'elle renvoie un tableau contenant les résultats de la recherche. Le code ressemble à ceci :

function search(keyword, callback) {
  // 模拟异步请求，实际中可能向后端发送请求并获取搜索结果
  setTimeout(function() {
    var results = [
      'JavaScript',
      'HTML',
      'CSS',
      'Ajax',
      'jQuery'
    ];

    // 调用回调函数，将搜索结果传递给回调函数
    callback(results);
  }, 500); // 设置一个延迟来模拟请求的耗时
}

Enfin, nous avons besoin d'une fonction pour afficher les résultats de la recherche sur la page. Cette fonction reçoit un tableau contenant les résultats de la recherche en tant que paramètre, met en évidence les résultats et les affiche dans la zone des résultats de recherche. Le code ressemble à ceci :

function showSearchResults(keyword) {
  search(keyword, function(results) {
    var html = '';

    for (var i = 0; i < results.length; i++) {
      // 使用关键字高亮显示搜索结果
      var highlighted = results[i].replace(keyword, '<span class="highlight">' + keyword + '</span>');
      html += '<p>' + highlighted + '</p>';
    }

    searchResults.innerHTML = html; // 将搜索结果显示在页面上
  });
}

Dans le code ci-dessus, nous utilisons une balise span avec un nom de classe "highlight" pour mettre en évidence les mots-clés dans les résultats de recherche. Nous pouvons ajouter des effets de mise en évidence aux éléments portant ce nom de classe via des styles CSS.

En résumé, nous avons implémenté la fonction de recherche en temps réel en surveillant les événements de saisie de la zone de saisie. Lorsque l'utilisateur saisit un mot-clé, la fonction de recherche est appelée et les résultats de la recherche sont mis en surbrillance et affichés sur la page. De cette façon, les utilisateurs peuvent voir instantanément les résultats de la recherche, ce qui améliore l’expérience utilisateur.

Source de référence :

• https://dev.to/marvin/js-tutorial-real-time-search-with-vanilla-js-489k

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!