Vervollständigen Sie das Suchfeld automatisch. Javascript-Implementierung_Javascript-Kenntnisse

Auf vielen Websites, die durchsucht werden müssen, gibt es ein Suchfeld mit automatischer Vervollständigung. Dies ist für Benutzer praktisch, um die gewünschten Suchbegriffe zu finden. Diese Methode ist benutzerfreundlicher . Es wird also empfohlen, es zu verwenden.

Diesen Effekt werden wir dieses Mal in zwei Artikeln erläutern. Zuerst werden wir das Design und Layout der Benutzeroberfläche vervollständigen.

Die HTML-Struktur der Benutzeroberfläche, das erste ist ein Suchfeld und das zweite ist die Suchschaltfläche.

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

Dies ist das einfachste Suchfeld-Design. In der Vergangenheit wurde Float für die Verarbeitung verwendet, und dann wurde das Suchfeld mit einem Rand versehen Die Schaltfläche und ein Abstand wurden hier festgelegt. Dies ist natürlich nicht erforderlich, um Kompatibilitätsprobleme zu berücksichtigen

.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;
}

Zu diesem Zeitpunkt denken wir weiter darüber nach. Wenn der Benutzer ein Schlüsselwort eingibt, muss eine Liste verwandter Wörter angezeigt werden.

Zum Beispiel

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

Wir hängen diese Codezeile an den Inhalt von .search an. Dann legen wir seine Mindestbreite auf die Breite von .search minus der Breite der Suchschaltfläche fest Box.

.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;
}

Dazu müssen einige Standardbrowser-Stile vor dem CSS-Code gelöscht werden. Der endgültige Effekt ist wie folgt.

Okay. Jetzt vervollständigen wir die JS-Code-Steuerung.

Lassen Sie uns die Ereignisse analysieren. Nachdem der Benutzer Text in das Eingabefeld eingegeben hat, wird der eingegebene Text mit den Hintergrunddaten abgefragt, an den Client zurückgegeben und die zurückgegebenen Daten dann unter der Datenliste angezeigt.

Gemäß diesem Schritt erhalten wir zunächst die Beschriftung des Eingabefelds und fügen dieser Beschriftung das Onkeyup-Ereignis hinzu

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

Hier simulieren wir Hintergrunddaten, hier dargestellt durch Daten, und fügen dann einige Daten hinzu

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

Die Hintergrunddaten sind verfügbar und Ereignisse werden hinzugefügt.

Die erste besteht darin, die Eingabedaten abzurufen und sie dann mit den Hintergrunddaten zu vergleichen. Anschließend werden die verglichenen Daten in einer Datendatei gespeichert.

//定义一些数据
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]);
    }
  }

 }

Weitere Analyse. Nachdem wir die im Hintergrund abgefragten Daten erhalten haben, müssen wir diese Daten dem Benutzer zur Ansicht anzeigen.

//定义一些数据
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);
  }

 }

Wenn wir Daten zur Liste hinzufügen, initialisieren wir zunächst die Datenliste, um das Hinzufügen doppelter Daten zu vermeiden. Zweitens fügen wir ein Klickereignis zu jeder Zeile der Datenliste hinzu und geben die Daten nach dem Klicken in das Suchfeld ein Datenliste ist ausgeblendet.

Das gesamte Suchfeld für die automatische Vervollständigung ist hier abgeschlossen. Testen wir den Effekt.

Dies könnte ein Problem mit der Aufnahmesoftware sein. Der Rand sollte die gleiche Farbe haben wie der Hintergrund, auf dem er aufgenommen wurde. Der Rand fehlt (⊙﹏⊙)b

Das Obige ist der automatische Vervollständigungseffekt des von JAVASCRIPT implementierten Suchfelds. Sie können es selbst testen