Compléter automatiquement le champ de recherche javascript Implementation_javascript skills

Dans de nombreux sites Web qui nécessitent une recherche, il y aura un champ de recherche à saisie semi-automatique. Il est pratique pour les utilisateurs de trouver les termes de recherche qu'ils souhaitent. Cela aide les utilisateurs à trouver rapidement les résultats qu'ils souhaitent. . C'est donc plus Il est recommandé d'utiliser.

Nous obtiendrons cet effet cette fois. Nous l'expliquerons à travers deux articles. Tout d'abord, nous terminerons la conception et la mise en page de l'interface.

La structure HTML de l'interface, la première est un champ de recherche et le second est le bouton de clic de recherche.

 <div class="search">
     <input type="text" value="">
     <button>搜索</button>
 </div>

Il s'agit de la conception de champ de recherche la plus simple. Comment gérer le code CSS. Dans le passé, float était utilisé pour le traitement, puis le champ de recherche recevait une bordure et un remplissage était ensuite supprimé. le bouton et un remplissage ont été définis. Ici, nous utilisons une disposition flexible. Il n'est pas nécessaire d'envisager de supprimer l'effet flottant. Bien sûr, les problèmes de compatibilité doivent être pris en compte ici.

.search {
  display: inline-flex;
  height: 35px;
  margin: 50px auto;
  position: relative;
}
.search input {
  border: #eee 1px solid;
  background-color: #fff;
  outline: none;
  width: 200px;
  padding: 0 5px;
}
.search button {
  background-color: #ff3300;
  color: #fff;
  border: none;
  width: 80px;
}

En ce moment, nous continuons d'y réfléchir. Si l'utilisateur saisit un mot-clé, une liste de mots associés doit être affichée.

Par exemple

<ul>
  <li><a href="#">武林外传</a> </li>
  <li><a href="#">葵花宝典</a> </li>
  <li><a href="#">如来佛掌</a> </li>
  <li><a href="#">九阴白骨爪</a> </li>
</ul>

Nous ajoutons cette ligne de code au contenu de .search. Ensuite, définissons le code CSS. Nous définissons sa largeur minimale à la largeur de .search moins la largeur du bouton de recherche. boîte.

.search ul {
  position: absolute;
  left: 0;
  top: 35px;
  border: #eee 1px solid;
  min-width: calc(100% - 80px);
  text-align: left;
}
.search ul a {
  display: block;
  padding: 5px;
}

Cela nécessite la suppression de certains styles de navigateur par défaut avant le code CSS. L'effet final est le suivant.

D'accord. Terminons maintenant le contrôle du code JS.

Analysons les événements. Une fois que l'utilisateur a saisi du texte dans la zone de saisie, le texte saisi est interrogé avec les données d'arrière-plan. Une fois la requête obtenue, elle est renvoyée au client, puis les données renvoyées sont affichées sous la liste de données.

Selon cette étape, nous obtenons d'abord l'étiquette de la zone de saisie et ajoutons l'événement onkeyup à cette étiquette

 var ele_key = document.getElementById("key");
 ele_key.onkeyup = function (e) {
   //处理事件
 }

Ici, nous simulons une donnée d'arrière-plan, représentée ici par des données, puis ajoutons quelques données

var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];

Les données d'arrière-plan sont disponibles et les événements sont ajoutés. Nous traitons maintenant les données.

La première consiste à obtenir les données d'entrée, puis à les comparer avec les données d'arrière-plan. Ensuite, enregistrez les données comparées dans un fichier de données.
.

//定义一些数据
var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];
var ele_key = document.getElementById("key");
ele_key.onkeyup = function (e) {

  var val = this.value;

  //获取输入框里匹配的数据
  var srdata = [];
  for (var i = 0; i < data.length; i++) {
    console.log(data[i].indexOf(val))
    if (val.trim().length > 0 && data[i].indexOf(val) > -1) {
       srdata.push(data[i]);
    }
  }

 }

Continuez l'analyse. À l'heure actuelle, après avoir obtenu les données interrogées en arrière-plan, nous devons afficher ces données à l'utilisateur pour qu'il les visualise.

//定义一些数据
var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];
var ele_key = document.getElementById("key");
ele_key.onkeyup = function (e) {

  var val = this.value;

  //获取输入框里匹配的数据
  var srdata = [];
  for (var i = 0; i < data.length; i++) {
    console.log(data[i].indexOf(val))
    if (val.trim().length > 0 && data[i].indexOf(val) > -1) {
       srdata.push(data[i]);
    }
  }

 //获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表,如果获取到的数据为空,则不显示
  var ele_datalist = document.getElementById("datalist");
  ele_datalist.style.visibility = "visible";
  ele_datalist.innerHTML = "";

  if (srdata.length == 0) {
    ele_datalist.style.visibility = "hidden";
  }

  //将搜索到的数据追加到显示数据列表, 然后每一行加入点击事件, 点击后将数据放入搜索框内, 数据列表隐藏
  var self = this;
  for (var i = 0; i < srdata.length; i++) {
    var ele_li = document.createElement("li");
    var ele_a = document.createElement("a");
    ele_a.setAttribute("href", "javascript:;");
    ele_a.textContent = srdata[i];

    ele_a.onclick = function () {
       self.value = this.textContent;
      ele_datalist.style.visibility = "hidden";
    }


    ele_li.appendChild(ele_a);
    ele_datalist.appendChild(ele_li);
  }

 }

Lors de l'ajout de données à la liste, nous initialisons d'abord la liste de données pour éviter d'ajouter des données en double. Deuxièmement, nous ajoutons un événement de clic à chaque ligne de la liste de données et plaçons les données dans la zone de recherche après avoir cliqué sur . la liste des données est masquée.

L'intégralité du champ de recherche de saisie semi-automatique est complétée ici. Testons l'effet.

Cela peut être un problème avec le logiciel d'enregistrement. La bordure doit être de la même couleur que l'arrière-plan sur lequel elle a été enregistrée. La bordure est manquante (⊙﹏⊙)b

. Ce qui précède est l'effet de complétion automatique du champ de recherche implémenté par JAVASCRIPT. Vous pouvez le tester vous-même
.