Wie implementiert man die Eingabefeldfunktion zur automatischen Vervollständigung in JavaScript?

Wie implementiert man die Eingabefeldfunktion zur automatischen Vervollständigung in JavaScript?

In der Webentwicklung ist das Eingabefeld für die automatische Vervollständigung eine sehr häufige Funktion. Es kann eine schnelle, bequeme und genaue Eingabemethode bieten und das Benutzererlebnis verbessern. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die Funktion zum automatischen Vervollständigen von Eingabefeldern implementieren, und es werden spezifische Codebeispiele bereitgestellt.

1. HTML-Struktur

Zuerst müssen wir eine HTML-Struktur vorbereiten, die ein Eingabefeld enthält. Ein Beispiel ist wie folgt:

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

Im obigen Beispiel verwenden wir das Element <input> als Eingabefeld, setzen eine ID auf „autocomplete-input“ und fügen ein Platzhalterattribut hinzu. Darüber hinaus verwenden wir ein <ul>-Element als Liste der Autocomplete-Eingabeaufforderungen und legen eine ID als „autocomplete-list“ fest. <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);
    }
  }
});

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

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

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

2. JavaScript-Implementierung

Als nächstes müssen wir JavaScript-Code schreiben, um die automatische Vervollständigungsfunktion zu implementieren. Zuerst müssen wir das Eingabeereignis des Eingabefelds abhören und die vom Benutzer eingegebenen Schlüsselwörter abrufen. Anschließend können wir die Daten zum eingegebenen Schlüsselwort über eine Ajax-Anfrage abrufen und in der Liste der Autovervollständigungsaufforderungen anzeigen.

Das Folgende ist ein einfaches Implementierungsbeispiel:

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

Im obigen Beispiel erhalten wir zunächst die DOM-Elemente des Eingabefelds und der Eingabeaufforderungsliste und verwenden die Methode addEventListener, um das Eingabeereignis abzuhören des Eingabefeldes. In der Event-Handler-Funktion erhalten wir das vom Benutzer eingegebene Schlüsselwort über das Attribut value.

Dann können wir eine Ajax-Anfrage senden, um die Daten zum Schlüsselwort abzurufen. Um den Code zu vereinfachen, verwenden wir im Beispiel eine statische Datenquelle, um die Anforderung zu simulieren. Die spezifische Implementierung muss die Backend-Schnittstelle entsprechend der tatsächlichen Situation aufrufen.

Als nächstes fügen wir Elemente, die dem Schlüsselwort entsprechen, in die Eingabeaufforderungsliste ein, indem wir das Datenarray durchlaufen. Durch Erstellen eines <li>-Elements, Festlegen seines Textinhalts mithilfe des Attributs textContent und schließlich durch Hinzufügen zur Eingabeaufforderungsliste. 🎜🎜3. Stilverschönerung🎜🎜Schließlich können wir die Liste der automatischen Vervollständigungsaufforderungen verschönern, um das Benutzererlebnis zu verbessern. Sie können den Stil der Eingabeaufforderungsliste über CSS festlegen, zum Beispiel: 🎜rrreee🎜Im obigen Beispiel legen wir den Rahmenstil, den Listenstil, den Abstand, die maximale Höhe und die Bildlaufleiste der Eingabeaufforderungsliste fest. 🎜🎜Durch die oben genannten Schritte können wir eine einfache Funktion zur automatischen Vervollständigung eines Eingabefelds implementieren. Wenn der Benutzer ein Schlüsselwort eingibt, werden relevante Daten automatisch durchsucht und passende Elemente werden in der Eingabeaufforderungsliste angezeigt. Benutzer können ein Element mit der Maus oder der Tastatur auswählen und auswählen, um eine automatische Vervollständigung zu erreichen. 🎜🎜Es ist zu beachten, dass es sich bei dem obigen Beispiel nur um eine einfache Implementierung handelt und die tatsächliche Situation möglicherweise eine komplexere Verarbeitungslogik und die Zusammenarbeit mit der Back-End-Schnittstelle erfordert. Wenn wir jedoch die oben genannten Prinzipien und Beispiele verstehen, können wir die Funktion des Eingabefelds zur automatischen Vervollständigung besser implementieren und anpassen. 🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man die Eingabefeldfunktion zur automatischen Vervollständigung in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!