jquery implementiert die automatische Eingabeaufforderungsfunktion

In modernen Webanwendungen ist die Auto-Prompt-Funktion eine der grundlegendsten Funktionen. Mit der automatischen Eingabeaufforderung können Benutzer beim Eingeben von Inhalten in das Eingabefeld bequem intelligente Eingabeaufforderungen erhalten und die Eingabegeschwindigkeit beschleunigen, wodurch die Wartezeit der Benutzer auf das Laden von Ergebnissen erheblich verkürzt werden kann.

Also, wie implementiert man mit jQuery die automatische Eingabeaufforderungsfunktion? Der spezifische Implementierungsprozess wird im Folgenden vorgestellt.

1. Vorbereitung
Bevor Sie mit der Implementierung beginnen, müssen Sie zunächst die jQuery-Bibliothek und die zugehörigen CSS-Dateien vorbereiten. Sie können die Bibliotheksdatei von der offiziellen Website herunterladen und in die HTML-Datei einfügen oder ein CDN verwenden, um die Ladegeschwindigkeit der Bibliotheksdatei zu beschleunigen.

In Bezug auf CSS-Dateien können Sie die von Bootstrap bereitgestellten Stile verwenden, um das Erscheinungsbild des Eingabeaufforderungsfelds zu verschönern. Dieser Schritt ist jedoch nicht erforderlich. Wenn Sie den Stil nicht verschönern müssen, müssen Sie die Stildatei nicht importieren.

2. Daten abrufen
Automatische Eingabeaufforderungen müssen eine Datenquelle bereitstellen, d. h. wenn der Benutzer Inhalte eingibt, werden Eingabeaufforderungsinformationen zum eingegebenen Inhalt aus der Datenquelle abgerufen und angezeigt vor dem Benutzer. Diese Datenquelle kann eine JSON-Datei, eine Datenbanktabelle oder eine API-Schnittstelle sein.

In diesem Beispiel verwenden wir eine einfache JSON-Datei als Datenquelle. Diese Datei enthält die Namen einiger Städte, für die wir beim Eingeben des Benutzers intelligente Hinweise bereitstellen.

In Bezug auf die Dateieinführung können Sie die AJAX-Methode verwenden, um JSON-Daten vom Server abzurufen. Der Einfachheit halber führen wir es hier direkt in die HTML-Datei ein.

3. Code schreiben
Als nächstes können wir mit dem Schreiben von Code beginnen.

1. HTML-Struktur

In der HTML-Struktur benötigen wir ein Eingabefeld und ein Eingabeaufforderungsfeld, um den Inhalt der intelligenten Eingabeaufforderung anzuzeigen. Die spezifische Struktur ist wie folgt:

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

2. jQuery-Code

Zunächst müssen Sie das Textfeld und die Eingabeaufforderungsfeldelemente danach abrufen Das Dokument wird geladen und in das Textfeld eingefügt. Binden Sie ein Keyup-Ereignis in das Keyup-Ereignis, das bei Benutzereingaben ausgelöst wird.

Als nächstes müssen wir für jede Eingabe die Eingabeaufforderungsinformationen zum Eingabeinhalt aus der Datenquelle abrufen und im Eingabeaufforderungsfeld anzeigen.

Der spezifische Code lautet wie folgt:

$(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);
  });
});

Dabei stellen Daten eine globale Variable dar, die zum Speichern von aus der Datenquelle erhaltenen Informationen verwendet wird. Hier definieren wir es einfach als Array mit Städtenamen. Der spezifische Inhalt ist wie folgt:

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

4. CSS-Stil

Zusätzlich zu JavaScript Code sind auch einige CSS-Stile erforderlich, um das Eingabeaufforderungsfeld zu verschönern. Hier verwenden wir den von Bootstrap bereitgestellten Stil. Der Code lautet wie folgt:

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

4. Zusammenfassung

Durch den obigen Code haben wir eine einfache automatische Eingabeaufforderungsfunktion implementiert. Dies kann Benutzern intelligente Eingabeaufforderungen bieten und das Tippen beschleunigen. Natürlich können in tatsächlichen Anwendungen weitere Optimierungsarbeiten durchgeführt werden, z. B. die Verwendung von Caching, um den Zugriff auf Datenquellen zu beschleunigen, die Verwendung von asynchronem Laden, um das Blockieren von Seiten zu vermeiden, und so weiter.

Das obige ist der detaillierte Inhalt vonjquery implementiert die automatische Eingabeaufforderungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!