Heim > Web-Frontend > Front-End-Fragen und Antworten > So implementieren Sie die Abfragefunktion für Eingabeschlüsselwörter in jquery

So implementieren Sie die Abfragefunktion für Eingabeschlüsselwörter in jquery

PHPz
Freigeben: 2023-04-07 14:03:19
Original
830 Leute haben es durchsucht

JQuery ist derzeit eine der am weitesten verbreiteten JavaScript-Bibliotheken. Sie stellt uns viele vorgefertigte APIs und viele Entwicklungs- und Paketierungstools zur Verfügung, die unsere Entwicklungsarbeit erheblich vereinfachen können. In diesem Artikel wird erläutert, wie Sie mit JQuery Schlüsselwortabfragen eingeben.

1. Vorbereitung

Bevor wir die Eingabeschlüsselwortabfrage von JQuery verwenden, müssen wir die JQuery-Bibliotheksdatei in die HTML-Datei einfügen, die über die folgende URL heruntergeladen werden kann:

https://jquery.com/download/

Gleichzeitig müssen wir ein Eingabefeld und eine Abfrageschaltfläche hinzufügen. Der Code lautet wie folgt:

<label for="keyword">请输入关键字:</label>
<input type="text" id="keyword">
<button id="search">查询</button>
Nach dem Login kopieren

2. Verwenden Sie JQuery, um die Eingabeschlüsselwortabfrage zu implementieren.

Fügen Sie zunächst eine Tabelle zur HTML-Datei hinzu, um die Abfrage anzuzeigen Ergebnisse.

<table id="resultTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
Nach dem Login kopieren

Als nächstes verwenden Sie den Ereignis-Listener von JQuery in der JavaScript-Datei. Wenn Sie auf die Abfrageschaltfläche klicken, rufen Sie die Schlüsselwörter im Eingabefeld ab und zeigen Sie dann die Abfrageergebnisse in der Tabelle über die AJAX-Anfrage an.

$(document).ready(function() {
    $("#search").click(function() {
        var keyword = $.trim($("#keyword").val());
        $.ajax({
            type: "GET",
            url: "search.php",
            data: {
                keyword: keyword
            },
            dataType: "json",
            success: function(data) {
                var tr = "";
                $.each(data, function(index, value) {
                    tr += "<tr>";
                    tr += "<td>" + value.name + "</td>";
                    tr += "<td>" + value.age + "</td>";
                    tr += "<td>" + value.gender + "</td>";
                    tr += "</tr>";
                });
                $("tbody").empty().append(tr);
            }
        });
    });
});
Nach dem Login kopieren

Unter anderem ist search.php die Datei für die Hintergrundverarbeitung von Daten. Wir müssen eine Datenabfrage basierend auf den eingegebenen Schlüsselwörtern im Hintergrund durchführen und die Abfrageergebnisse zurückgeben.

3. Vollständiger Code

HTML-Datei:

<label for="keyword">请输入关键字:</label>
<input type="text" id="keyword">
<button id="search">查询</button>
<table id="resultTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
Nach dem Login kopieren

4. Zusammenfassung

Das Obige ist die Implementierungsmethode der JQuery-Eingabeschlüsselwortabfrage, wir können die Eingabe einfach vervollständigen Schlüssel Die Wortabfragefunktion hat unsere Entwicklungseffizienz erheblich verbessert. Es ist erwähnenswert, dass wir bei der tatsächlichen Verwendung einige Datenüberprüfungs- und Filtervorgänge basierend auf der tatsächlichen Situation durchführen müssen, um Sicherheitsprobleme wie SQL-Injection zu verhindern.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Abfragefunktion für Eingabeschlüsselwörter in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage