So erstellen Sie ein HTML-Suchfeld

2. Senden-Button hinzufügen

Beim Erstellen der Suchfunktion benötigen wir auch einen Senden-Button. Nachdem der Benutzer Text eingegeben hat, muss er oder sie die Maus oder die Tastatur verwenden, um die Suchanfrage einzugeben und zu senden. Für die Schaltfläche „Senden“ verwenden wir auch das Element mit dem Typ „submit“, wie unten gezeigt:

<form>
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

In diesem HTML-Code fügen wir ein -Element dient als Absenden-Schaltfläche des Suchformulars und das Wertattribut gibt den Text an, den die Schaltfläche auf der Seite anzeigt.

3. Suchfunktion implementieren

Oben haben wir die Grundstruktur und den Stil des Suchfelds definiert, und als nächstes müssen wir die Suche implementieren Funktion. Die einfachste Methode besteht darin, das Aktionsattribut von HTML zu verwenden, um die Suchformularanforderung zur Verarbeitung an den Server zu übergeben. Der folgende Code sendet beispielsweise die Suchformularanforderung zur Verarbeitung an die Seite „search.php“.

<form action="search.php">
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

Wenn Sie jedoch noch keinen Server haben oder noch keinen serverseitigen Code geschrieben haben, können Sie JavaScript in HTML verwenden, um die Suchfunktion zu implementieren. Wir verwenden JavaScript, um das Klickereignis der Schaltfläche „Senden“ abzuhören und die Textinformationen im Eingabefeld abzurufen. Die spezifische Operation lautet wie folgt:

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索" onclick="search()">
</form>

<script>
function search() {
  var keyword = document.getElementById("searchBox").value;
  alert("正在搜索：" + keyword);
  // 实现搜索功能
}
</script>

In diesem Beispiel fügen wir zunächst ein ID-Attribut zum -Element hinzu, damit der Verweis auf das Element einfach im JavaScript-Code abgerufen werden kann. Anschließend definieren wir eine JavaScript-Funktion namens „search“, die vom Onclick-Ereignis der Submit-Schaltfläche aufgerufen wird. In der Funktion „Suchen“ erhalten wir über document.getElementById den Verweis auf das Eingabefeld, erhalten das in das Eingabefeld eingegebene Suchwort und verwenden schließlich die Warnfunktion, um das gesuchte Schlüsselwort anzuzeigen. Hinter der Alarmfunktion können wir unseren eigenen Suchcode schreiben.

4. Implementieren Sie die automatische Eingabeaufforderungsfunktion

Mit der automatischen Eingabeaufforderungsfunktion im Suchfeld können Benutzer bei der Eingabe von Schlüsselwortvorschlägen automatisch relevante Suchanfragen anzeigen. Diese Funktion ist sehr nützlich, da sie den Benutzern hilft, die gewünschten Informationen schneller zu finden. Um die automatische Eingabeaufforderungsfunktion des Suchfelds in HTML zu implementieren, können Sie JavaScript verwenden, um sie zu implementieren. Beispielsweise können wir das onkeyup-Ereignis des Eingabefelds binden, und jedes Mal, wenn Zeichen in das Eingabefeld eingegeben werden, werden dem Benutzer automatisch relevante Suchvorschläge angezeigt.

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入" onkeyup="showHint()">
  <input type="submit" value="搜索">
</form>

<script>
function showHint() {
  var keyword = document.getElementById("searchBox").value;
  var xmlhttp;
  if (keyword.length==0) { 
    document.getElementById("hintBox").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("hintBox").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","gethint.php?q="+keyword,true);
  xmlhttp.send();
}
</script>

Im obigen Code definieren wir eine Funktion namens „showHint“, die mithilfe des XMLHttpRequest-Objekts eine Get-Anfrage an den Hintergrund sendet, um schlüsselwortbezogene Suchvorschläge zu erhalten. Wenn die Suchvorschläge eingeholt werden, zeigen wir sie im definierten HTML-Element mit der ID „hintBox“ an.

5. Stil hinzufügen

Schließlich können wir das Erscheinungsbild des Suchfelds durch CSS-Stile verschönern. Beispielsweise kann der Stil des Suchfelds vereinheitlicht werden, indem die Hintergrundfarbe, der äußere Rand, der innere Rand usw. festgelegt werden. Der Code lautet wie folgt:

input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  outline: none;
}
input[type="text"]:focus {
  border-color: #369;
  box-shadow: 0 0 5px #369;
}
input[type="submit"] {
  background-color: #369;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin-left: -5px;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #258;
}

Im obigen Code legen wir den inneren fest Rand des Eingabefelds Abstände, äußere Ränder, abgerundete Ecken und andere Stile lassen es schöner aussehen. Gleichzeitig haben wir auch eine :focus-Pseudoklasse definiert. Wenn das Eingabefeld den Fokus erhält, wird der Rahmenstil geändert, um eine Beziehung zum Box-Rendering herzustellen. Im Stil der Schaltfläche „Senden“ legen wir die Stiländerung fest, wenn die Maus darüber bewegt wird.

Zusammenfassung

Durch die Einleitung dieses Artikels haben wir gelernt, wie man HTML und JavaScript zum Erstellen eines Suchfelds verwendet, und beherrschen einige gängige Techniken, wie z. B. die automatische Vorschlagsfunktion und Verschönerungsstile usw. Das Implementierungsprinzip des Suchfelds ist auch das Implementierungsprinzip von Hyperlinks. Die einfachste Implementierungsmethode besteht darin, die Formulardaten über die Übermittlungsfunktion von HTML-Formularelementen zur Verarbeitung an den Server zu senden. Natürlich können wir auch JavaScript-Hooks verwenden, um Daten für die teilweise Verarbeitung im Front-End abzufangen, was oft schneller und sicherer ist und den Geschäftsanforderungen besser entspricht. Ich bin davon überzeugt, dass Ihre Webseiten nach der Beherrschung dieser Fähigkeiten farbenfroher werden.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein HTML-Suchfeld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!