jquery implémente la fonction d'invite automatique

Dans les applications Web modernes, la fonction d'invite automatique est l'une des fonctions les plus basiques. L'invite automatique permet aux utilisateurs d'obtenir facilement des invites intelligentes lors de la saisie du contenu dans la zone de saisie et d'accélérer la vitesse de saisie, ce qui peut réduire considérablement le temps d'attente des utilisateurs pour le chargement des résultats.

Alors, comment utiliser jQuery pour implémenter la fonction d'invite automatique ? Le processus de mise en œuvre spécifique est présenté ci-dessous.

1. Préparation
Avant de commencer l'implémentation, vous devez d'abord préparer la bibliothèque jQuery et les fichiers CSS associés. Vous pouvez choisir de télécharger le fichier de bibliothèque depuis le site officiel et de l'introduire dans le fichier HTML, ou vous pouvez utiliser un CDN pour accélérer la vitesse de chargement du fichier de bibliothèque.

En termes de fichiers CSS, vous pouvez utiliser les styles fournis par Bootstrap pour embellir l'apparence de la boîte d'invite. Toutefois, cette étape n’est pas obligatoire. Si vous n'avez pas besoin d'embellir le style, vous n'avez pas besoin d'importer le fichier de style.

2. Obtenir des données
Les invites automatiques doivent fournir une source de données, c'est-à-dire que lorsque l'utilisateur saisit du contenu, les informations d'invite liées au contenu saisi sont obtenues à partir de la source de données et affichées devant l'utilisateur. Cette source de données peut être un fichier JSON, une table de base de données ou une interface API.

Dans cet exemple, nous utilisons un simple fichier JSON comme source de données. Ce fichier contient les noms de certaines villes pour lesquelles nous fournirons des astuces intelligentes au fur et à mesure de la saisie de l'utilisateur.

En termes d'introduction de fichier, vous pouvez utiliser la méthode AJAX pour obtenir des données JSON depuis le serveur. Pour plus de commodité, nous l'introduisons ici directement dans le fichier HTML.

3. Écrire du code
Ensuite, nous pouvons commencer à écrire du code.

1. Structure HTML

Dans la structure HTML, nous avons besoin d'une zone de saisie et d'une zone d'invite pour afficher le contenu de l'invite intelligente. La structure spécifique est la suivante :

<input id="search-box" type="text" placeholder="输入城市名" />
<div id="suggestion-box"></div>

2. code jQuery

Tout d'abord, vous devez obtenir les éléments de la zone de texte et de la zone d'invite après le chargement du document, et lier un événement keyup à la zone de texte, qui est déclenché lorsque le entrées de l'utilisateur.

Ensuite, pour chaque entrée, nous devons obtenir les informations d'invite liées au contenu d'entrée à partir de la source de données et les afficher dans la zone d'invite.

Le code spécifique est le suivant :

$(document).ready(function() {
  // 获取输入框和提示框元素
  var searchBox = $('#search-box');
  var suggestionBox = $('#suggestion-box');

  // 绑定 keyup 事件
  searchBox.keyup(function() {
    // 获取输入框的值
    var currentText = searchBox.val();

    // 根据输入框的值从数据源中获取匹配的提示信息
    var filteredData = data.filter(function(item) {
        return item.toLowerCase().indexOf(currentText.toLowerCase()) > -1;
    });

    // 根据获取到的提示信息生成提示框的内容
    var html = '';
    for (var i = 0; i < filteredData.length; i++) {
        html += '<div class="item">' + filteredData[i] + '</div>';
    }

    // 将生成的内容填充到提示框中
    suggestionBox.html(html);
  });
});

Parmi eux, data représente une variable globale utilisée pour stocker les informations obtenues à partir de la source de données. Ici, nous le définissons simplement comme un tableau contenant des noms de villes, et son contenu spécifique est le suivant :

var data = ['北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都'];

4. Style CSS

En plus du code JavaScript, certains styles CSS sont également nécessaires pour embellir la boîte de dialogue. Ici, nous utilisons le style fourni par Bootstrap, et le code est le suivant :

#suggestion-box {
  position: relative;
  z-index: 999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
}

#suggestion-box .item {
  padding: 5px 10px;
  font-size: 14px;
}

#suggestion-box .item:hover {
  background: #f5f5f5;
}

IV. Résumé

Grâce au code ci-dessus, nous avons implémenté une fonction d'invite automatique simple qui peut fournir aux utilisateurs des invites intelligentes et accélérer leur saisie. . Bien entendu, dans les applications réelles, davantage de travaux d'optimisation peuvent être effectués, comme l'utilisation de la mise en cache pour accélérer l'accès aux sources de données, l'utilisation du chargement asynchrone pour éviter le blocage des pages, etc.

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!