Comment implémenter la fonction de zone de saisie de complétion automatique en JavaScript ?-js tutoriel-php.cn

Comment implémenter la fonction de zone de saisie de complétion automatique en JavaScript ?

WBOY

Libérer： 2023-10-20 12:39:11

original

939 Les gens l'ont consulté

JavaScript 如何实现自动补全输入框功能？

Comment implémenter la fonction de zone de saisie de complétion automatique en JavaScript ?

Dans le développement Web, la zone de saisie de saisie semi-automatique est une fonctionnalité très courante. Elle peut fournir une méthode de saisie rapide, pratique et précise et améliorer l'expérience utilisateur. Cet article explique comment utiliser JavaScript pour implémenter la fonction de zone de saisie de saisie semi-automatique et fournit des exemples de code spécifiques.

1. Structure HTML

Tout d'abord, nous devons préparer une structure HTML contenant une zone de saisie. Un exemple est le suivant :

<input type="text" id="autocomplete-input" placeholder="请输入关键字">
<ul id="autocomplete-list"></ul>

Copier après la connexion

Dans l'exemple ci-dessus, nous utilisons l'élément <input> comme zone de saisie, définissons un identifiant sur "autocomplete-input" et ajoutons un attribut d'espace réservé. De plus, nous utilisons un élément <ul> comme liste d'invites de saisie semi-automatique et définissons un identifiant comme "autocomplete-list". <input> 元素作为输入框，设置了一个 id 为 "autocomplete-input"，并添加了一个 placeholder 属性。另外，我们使用一个 <ul> 元素作为自动补全的提示列表，设置了一个 id 为 "autocomplete-list"。

二、JavaScript 实现

接下来，我们需要编写 JavaScript 代码实现自动补全功能。首先，我们需要监听输入框的输入事件，并获取用户输入的关键字。然后，我们可以通过 Ajax 请求获取与输入关键字相关的数据，并将其展示在自动补全的提示列表中。

以下是一个简单的实现示例：

// 获取输入框和提示列表
var input = document.getElementById('autocomplete-input');
var list = document.getElementById('autocomplete-list');

// 监听输入框的输入事件
input.addEventListener('input', function() {
  var keyword = input.value;
  
  // 发送请求获取与关键字相关的数据
  // 这里可以根据实际情况进行后端接口的调用
  
  // 示例中使用一个静态的数据源来模拟请求
  var data = ['apple', 'banana', 'orange', 'grape', 'pineapple'];
  
  // 清空提示列表
  list.innerHTML = '';

  // 遍历数据，在提示列表中插入匹配的项
  for (var i = 0; i < data.length; i++) {
    if (data[i].indexOf(keyword) !== -1) {
      var item = document.createElement('li');
      item.textContent = data[i];
      list.appendChild(item);
    }
  }
});

Copier après la connexion

在上述示例中，我们首先获取输入框和提示列表的 DOM 元素，并利用 addEventListener 方法监听输入框的 input 事件。在事件处理函数中，我们通过 value 属性获取用户输入的关键字。

然后，我们可以发送 Ajax 请求，获取与关键字相关的数据。在示例中，为了简化代码，我们使用了一个静态的数据源来模拟请求，具体实现时需要根据实际情况进行后端接口的调用。

接下来，我们通过遍历数据数组，在提示列表中插入与关键字匹配的项。通过创建 <li> 元素，并利用 textContent

2. Implémentation de JavaScript

Ensuite, nous devons écrire du code JavaScript pour implémenter la fonction de complétion automatique. Tout d’abord, nous devons écouter l’événement d’entrée de la zone de saisie et obtenir les mots-clés saisis par l’utilisateur. Nous pouvons ensuite obtenir les données liées au mot-clé saisi via une requête Ajax et les afficher dans la liste d'invites de saisie semi-automatique.

Ce qui suit est un exemple d'implémentation simple :

#autocomplete-list {
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

#autocomplete-list li {
  padding: 5px;
  cursor: pointer;
}

#autocomplete-list li:hover {
  background-color: #f1f1f1;
}

Copier après la connexion

Dans l'exemple ci-dessus, nous obtenons d'abord les éléments DOM de la zone de saisie et de la liste d'invites, et utilisons la méthode addEventListener pour écouter l'événement d'entrée. de la zone de saisie. Dans la fonction de gestionnaire d'événements, nous obtenons le mot-clé saisi par l'utilisateur via l'attribut value.

Ensuite, nous pouvons envoyer une requête Ajax pour obtenir les données liées au mot-clé. Dans l'exemple, afin de simplifier le code, nous utilisons une source de données statique pour simuler la requête. L'implémentation spécifique doit appeler l'interface backend en fonction de la situation réelle.

Ensuite, nous insérons les éléments correspondant au mot-clé dans la liste d'invites en parcourant le tableau de données. En créant un élément <li>, en définissant son contenu textuel à l'aide de l'attribut textContent, et enfin en l'ajoutant à la liste d'invites. 🎜🎜3. Embellissement du style🎜🎜Enfin, nous pouvons embellir la liste d'invites de saisie semi-automatique pour améliorer l'expérience utilisateur. Vous pouvez définir le style de la liste d'invites via CSS, par exemple : 🎜rrreee🎜Dans l'exemple ci-dessus, nous définissons le style de bordure, le style de liste, le remplissage, la hauteur maximale et la barre de défilement de la liste d'invites. 🎜🎜Grâce aux étapes ci-dessus, nous pouvons implémenter une simple fonction de zone de saisie de saisie semi-automatique. Lorsque l'utilisateur saisit un mot-clé, les données pertinentes sont automatiquement recherchées et les éléments correspondants sont affichés dans la liste d'invites. Les utilisateurs peuvent sélectionner et sélectionner un élément via la souris ou le clavier pour obtenir une complétion automatique. 🎜🎜Il convient de noter que l'exemple ci-dessus n'est qu'une simple implémentation et que la situation réelle peut nécessiter une logique de traitement plus complexe et une coopération d'interface back-end. Cependant, en comprenant les principes et les exemples ci-dessus, cela peut nous aider à mieux implémenter et personnaliser la fonction de zone de saisie de saisie semi-automatique. 🎜

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!