Jquery-Abfrage-Stretchbox

JQuery ist eine einfache und benutzerfreundliche JavaScript-Bibliothek. Es kapselt viele gängige JavaScript-Operationen und bietet eine einfache Möglichkeit, HTML-Dokumente und DOM-Elemente zu bearbeiten. In diesem Artikel stellen wir den Lesern vor, wie man mit JQuery eine Abfrage-Stretchbox erstellt.

Das Abfrage-Streckfeld ist eine häufige Komponente in Webanwendungen, die es Benutzern ermöglicht, Abfragebedingungen einzugeben und Ergebnisse zurückzugeben. Es enthält normalerweise ein Textfeld und eine optionale Schaltfläche „Suchen“. Wenn Benutzer Abfragebedingungen eingeben, filtert die Stretchbox automatisch die Ergebnisse basierend auf den Eingabebedingungen, sodass Benutzer schneller finden, was sie benötigen.

Um eine Abfrage-Stretchbox mit JQuery zu erstellen, benötigen wir die folgenden Schritte:

1. Erstellen Sie ein Stretchbox-Element in einem HTML-Dokument.

Wir können die Grundelemente von HTML verwenden, um eine Stretchbox zu erstellen. Typischerweise umfasst eine Stretchbox ein Eingabefeld und eine Suchschaltfläche. Das Eingabefeld dient zur Eingabe von Abfragebedingungen und die Suchschaltfläche zum Auslösen des Suchvorgangs.

Das Folgende ist ein einfacher HTML-Code zum Erstellen einer Abfrage-Stretchbox:

<div class="search-container">
  <input type="text" placeholder="输入搜索关键字...">
  <button class="search-button">搜索</button>
</div>

In diesem Beispiel haben wir eine Klasse namens „search-container“ erstellt, die ein DIV-Element enthält ein Eingabefeld vom Typ „Text“ und eine Suchschaltfläche mit dem Klassennamen „Suchschaltfläche“. Das „Platzhalter“-Attribut im Eingabefeld stellt einen Standardtext für das Eingabefeld bereit, um dem Benutzer zu helfen, zu verstehen, was er eingeben soll.

2. JQuery-Bibliothek zur Seite hinzufügen

Um die JQuery-Bibliothek zu verwenden, müssen wir oben oder einen Link zur JQuery-Bibliothek hinzufügen Ende der Seite. Unten finden Sie einen einfachen Link zum Hinzufügen der JQuery-Bibliothek zu einer HTML-Seite:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Wenn wir diesen Link verwenden, um die JQuery-Bibliothek zu einem HTML-Dokument hinzuzufügen, können wir jetzt alle Funktionen von JQuery zum Bearbeiten von Dokumentelementen verwenden.

3. Schreiben Sie JQuery-Code, um die Abfragefunktionalität zu implementieren.

Sobald wir das Stretch-Box-Element auf der Seite erstellt und die JQuery-Bibliothek hinzugefügt haben, sind wir für Sie da Sie können mit dem Schreiben von JQuery-Code beginnen, um die Funktion der Stretchbox zu implementieren. Wir schreiben den folgenden Code, um die Elemente nach dem im Eingabefeld eingegebenen Text zu filtern und die Ergebnisse auf der Seite anzuzeigen.

$(document).ready(function(){
    $('.search-button').click(function(){
        var searchText = $('.search-container input').val();
        $('.search-list li').each(function(){
            if($(this).text().toUpperCase().indexOf(searchText.toUpperCase()) == -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
});

Der obige JQuery-Code verwendet die folgenden Schritte:

1. Wir verwenden die Funktion .ready(), um den Code in eine Funktion zu verpacken, die ausgeführt wird, wenn die Seite ist fertig.
2. Wir verwenden die Funktion .click(), um den Code in eine Funktion zu verpacken, die ausgeführt wird, wenn auf die Suchschaltfläche geklickt wird.
3. Wir erhalten zunächst die vom Benutzer eingegebenen Abfragekriterien, die im Wert des Suchfelds gespeichert werden.
4. Wir verwenden die Funktion .each(), um die Elementliste mit den Ergebnissen zu durchlaufen (die Elementliste nimmt hier als Beispiel eine ungeordnete Liste mit dem Klassennamen „search-list“).
5. Führen Sie für jedes Element eine Funktion aus, die das Element anzeigt, wenn die Abfragekriterien mit dem Text eines Elements übereinstimmen, andernfalls wird es ausgeblendet.

Wenn der Benutzer auf die Suchschaltfläche klickt, überprüft der JQuery-Code jedes Element in der Liste und blendet es aus, wenn es die Abfragekriterien nicht enthält. Wenn sie Abfragekriterien enthalten, bleiben sie sichtbar.

4. CSS-Stil

Damit die Abfrage-Streckbox wie eine Reihe separater Elemente aussieht, müssen wir schließlich etwas CSS-Stil hinzufügen. Hier ist ein einfacher CSS-Stil, der den Stil des Suchfelds und der Suchschaltfläche auf alle Abfrage-Streckfelder auf der Seite anwendet:

.search-container {
  display: flex;
  align-items: center;
}

.search-container input[type=text] {
  padding: 8px;
  font-size: 17px;
  border: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.search-container button {
  padding: 10px;
  font-size: 17px;
  border: none;
  background-color: #388e3c;
  color: #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

.search-container button:hover {
  background-color: #388e3c;
}

Im obigen CSS-Stil haben wir einen. Es sind einige Stile definiert unter die Klasse, die auf die DIV-Elemente angewendet wird, die das Suchfeld und die Suchschaltfläche enthalten. Wir haben auch spezielle Stile für das Eingabefeld und die Suchschaltfläche definiert, um sie schöner aussehen zu lassen.

Fazit

In diesem Artikel haben wir den Lesern gezeigt, wie man mit JQuery eine Abfrage-Stretchbox erstellt. Dieses Ziel haben wir in vier Schritten erreicht: HTML-Elemente erstellen, JQuery-Bibliothek hinzufügen, JQuery-Code schreiben und CSS-Stile hinzufügen. JQuery erleichtert nicht nur das Erstellen von Abfrage-Stretchboxen, sondern macht Webanwendungen auch benutzerfreundlicher und benutzerfreundlicher.

Das obige ist der detaillierte Inhalt vonJquery-Abfrage-Stretchbox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!