Wie man HTML, CSS und jQuery verwendet, um erweiterte Funktionen zur automatischen Vervollständigung von Formularen zu implementieren

Für die Verwendung von HTML, CSS und jQuery zur Implementierung der erweiterten Funktion der automatischen Formularvervollständigung sind spezifische Codebeispiele erforderlich.

Auf den meisten Websites sind Formulare eines der wichtigen Elemente für Benutzer, um mit der Website zu interagieren. Dies kann jedoch mühsam werden, wenn Benutzer häufig dieselben oder ähnliche Daten in ein Formular eingeben müssen. Um das Benutzererlebnis zu verbessern, können wir mithilfe von HTML, CSS und jQuery erweiterte Funktionen der automatischen Formularvervollständigung implementieren, sodass Benutzer Formulare schneller ausfüllen und die Möglichkeit von Eingabefehlern verringern können.

In diesem Artikel stellen wir vor, wie man mit HTML, CSS und jQuery ein Formular mit automatischer Vervollständigung erstellt. Wir verwenden ein Beispielszenario und gehen davon aus, dass wir ein Registrierungsformular mit einem Feld zum Ausfüllen der Stadt des Benutzers erstellen. Wir werden Ajax und JSON verwenden, um die Stadtdatenquelle abzurufen, und dann jQuery verwenden, um die Funktion zur automatischen Vervollständigung zu implementieren.

Erstens erstellen wir die HTML-Struktur. Wir benötigen ein Eingabefeld und eine Dropdown-Liste, um die Autovervollständigungsoptionen anzuzeigen. Der HTML-Code lautet wie folgt:

<input type="text" id="city-input" />
<ul id="city-list"></ul>

Als nächstes müssen wir Stile zum Eingabefeld und zur Dropdown-Liste hinzufügen. Dies können wir mit CSS erreichen. Hier sind nur die grundlegendsten Stile aufgeführt, Sie können sie an Ihre Bedürfnisse anpassen:

#city-input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
}

#city-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: none; /* 初始状态下隐藏下拉列表 */
  border: 1px solid #ccc;
}

Als nächstes müssen wir die Stadtdatenquelle abrufen. Hier gehen wir davon aus, dass die Stadtdaten in einer Datei im JSON-Format gespeichert sind und der Dateiname Cities.json lautet. Die Beispieldatenstruktur lautet wie folgt:

[
  {
    "id": 1,
    "name": "北京"
  },
  {
    "id": 2,
    "name": "上海"
  },
  {
    "id": 3,
    "name": "广州"
  }
  // 其他城市数据...
]

In jQuery ist es sehr einfach, Ajax zum Abrufen von JSON-Daten zu verwenden. Um dies zu erreichen, können wir die Methode $.getJSON von jQuery verwenden. Der Beispielcode lautet wie folgt:

$.getJSON("cities.json", function(data) {
  // 处理获取的城市数据
});

Als nächstes müssen wir Code schreiben, um die Autovervollständigungsfunktion zu implementieren. Wenn der Benutzer mit der Eingabe in das Eingabefeld beginnt, müssen wir ein Ereignis auslösen, um passende Autovervollständigungsoptionen anzuzeigen. Wir können das Keyup-Ereignis von jQuery verwenden, um Benutzereingaben zu überwachen. Der Beispielcode lautet wie folgt:

$("#city-input").keyup(function() {
  var searchQuery = $(this).val(); // 获取输入框的值

  if (searchQuery !== "") {
    // 发送Ajax请求获取匹配的城市数据
    $.getJSON("cities.json", function(data) {
      var matchingCities = [];

      // 遍历城市数据，查找匹配的城市
      $.each(data, function(index, city) {
        var cityName = city.name;

        if (cityName.indexOf(searchQuery) !== -1) {
          matchingCities.push(cityName);
        }
      });

      // 显示匹配的城市选项
      showMatchingCities(matchingCities);
    });
  } else {
    // 如果输入框为空，隐藏下拉列表
    hideCityList();
  }
});

Im obigen Code verwenden wir das Keyup-Ereignis, um die Wertänderungen des Eingabefelds zu überwachen. Wenn der Wert des Eingabefelds nicht leer ist, senden wir eine Ajax-Anfrage und durchsuchen die Stadtdaten, um die Stadt zu finden, die den Suchkriterien entspricht. Diese Städte zeigen wir dann in einer Dropdown-Liste an. Wir müssen auch zwei Hilfsfunktionen schreiben, showMatchingCities und hideCityList. Die Funktionen dieser beiden Funktionen bestehen darin, passende Stadtoptionen anzuzeigen bzw. die Dropdown-Liste auszublenden.

function showMatchingCities(cities) {
  var $cityList = $("#city-list");
  $cityList.empty(); // 清空下拉列表中的选项

  // 遍历匹配的城市，创建选项并添加到下拉列表中
  $.each(cities, function(index, cityName) {
    var $cityOption = $("<li>" + cityName + "</li>");
    $cityList.append($cityOption);
  });

  $cityList.show(); // 显示下拉列表
}

function hideCityList() {
  var $cityList = $("#city-list");
  $cityList.hide(); // 隐藏下拉列表
}

Abschließend müssen wir noch eine Handlerfunktion für das Klickereignis der Autovervollständigungsoption hinzufügen, damit die ausgewählte Stadt in das Eingabefeld eingetragen wird. Der Beispielcode lautet wie folgt:

$("#city-list").on("click", "li", function() {
  var cityName = $(this).text();
  $("#city-input").val(cityName);
  hideCityList();
});

Im obigen Code verwenden wir die on-Methode von jQuery, um die Ereignisdelegierung abzuwickeln. Wenn der Benutzer im Dropdown-Menü auf eine Option klickt, erhalten wir den Namen der ausgewählten Stadt und tragen ihn in das Eingabefeld ein. Dann blenden wir das Dropdown aus.

Anhand der obigen Codebeispiele können wir sehen, wie man HTML, CSS und jQuery verwendet, um die erweiterte Funktion der automatischen Formularvervollständigung zu implementieren. Diese Codes können je nach Bedarf angepasst und erweitert werden, um verschiedenen Szenarien und Geschäftsanforderungen gerecht zu werden. Durch die Reduzierung des Eingabeaufwands und der Fehler des Benutzers wird die Funktion zur automatischen Vervollständigung von Formularen das Benutzererlebnis erheblich verbessern. Ich hoffe, dieser Artikel ist hilfreich für Sie!

Das obige ist der detaillierte Inhalt vonWie man HTML, CSS und jQuery verwendet, um erweiterte Funktionen zur automatischen Vervollständigung von Formularen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!