So erstellen Sie eine dynamische Suchvorhersagefunktion mit HTML, CSS und jQuery

So erstellen Sie mit HTML, CSS und jQuery eine dynamische Suchassoziationsfunktion

Mit der Entwicklung des Internets sind Suchfunktionen zu einem unverzichtbaren Bestandteil unseres täglichen Lebens geworden. Um das Sucherlebnis der Benutzer zu verbessern, sind dynamische Suchassoziationsfunktionen zu einer häufigen Anforderung geworden. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery eine einfache und effektive Suchvorhersagefunktion erstellen und spezifische Codebeispiele bereitstellen.

1. Vorbereitung

Zunächst müssen wir relevante Ressourcen vorbereiten. Stellen Sie sicher, dass Sie die neueste Version von jQuery installiert haben, und fügen Sie in Ihrer HTML-Seite Folgendes hinzu:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. HTML-Struktur

Als nächstes müssen wir die HTML-Struktur erstellen. Fügen Sie nach einem Eingabefeld einen Bereich hinzu, um die Ergebnisse der Suchvorhersage anzuzeigen, zum Beispiel:

<input type="text" id="searchInput" placeholder="输入关键词">
<div id="suggestions"></div>

3. CSS-Stil

Damit die Ergebnisse der Suchvorhersage im entsprechenden Stil auf der Seite angezeigt werden, müssen wir einige CSS-Stile hinzufügen . Hier ist ein einfaches CSS-Beispiel:

#suggestions {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    width: 200px;
    display: none;
    z-index: 999;
}

#suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#suggestions li {
    padding: 10px;
    cursor: pointer;
}

#suggestions li:hover {
    background-color: #f0f0f0;
}

Dieser CSS-Code stellt einige grundlegende Stile für den Anzeigebereich der Suchvorhersageergebnisse bereit.

4. jQuery-Implementierung

Jetzt implementieren wir die Suchzuordnungsfunktion. Das Folgende ist ein einfaches Codebeispiel:

$(document).ready(function() {
    $('#searchInput').on('input', function() {
        var keyword = $(this).val();
        
        if (keyword.length >= 1) {
            // 发送Ajax请求到后端，获取搜索联想结果
            $.ajax({
                url: 'search_suggestions.php', // 替换为你的后端接口地址
                type: 'GET',
                dataType: 'json',
                data: { keyword: keyword },
                success: function(response) {
                    if (response.length > 0) {
                        var suggestions = '';
                        
                        // 构建搜索联想结果列表
                        for(var i = 0; i < response.length; i++) {
                            suggestions += '<li>' + response[i] + '</li>';
                        }
                        
                        // 将搜索联想结果显示在页面上
                        $('#suggestions').html('<ul>' + suggestions + '</ul>').show();
                    } else {
                        $('#suggestions').hide();
                    }
                },
                error: function() {
                    // 错误处理
                }
            });
        } else {
            $('#suggestions').hide();
        }
    });
    
    // 监听对搜索联想结果的点击事件
    $(document).on('click', '#suggestions li', function() {
        var suggestion = $(this).text();
        
        // 将选中的搜索联想结果填充到输入框中
        $('#searchInput').val(suggestion);
        
        $('#suggestions').hide();
    });
    
    // 点击页面其他区域时隐藏搜索联想结果
    $(document).on('click', function(e) {
        if (!$(e.target).is('#searchInput')) {
            $('#suggestions').hide();
        }
    });
});

In diesem Code hören wir zunächst auf das input-Ereignis des Eingabefelds. Sobald eine Texteingabe im Eingabefeld erfolgt, senden wir über Ajax eine Anfrage an das Backend, um die Suche abzurufen Verbandsergebnisse. Anschließend wird basierend auf den vom Backend zurückgegebenen Ergebnissen eine Liste mit Suchvorhersageergebnissen erstellt und auf der Seite angezeigt.

Gleichzeitig haben wir auch das Klickereignis des Suchvorhersageergebnislistenelements überwacht. Wenn der Benutzer auf ein Vorhersageergebnis klickt, wird das Ergebnis in das Eingabefeld eingetragen und das Suchvorhersageergebnis ausgeblendet.

Schließlich überwachen wir auch Klickereignisse in anderen Bereichen der Seite. Wenn der Benutzer auf andere Bereiche der Seite klickt, werden die Suchergebnisse ausgeblendet.

5. Backend-Verarbeitung

Der Ajax-Anfrageteil im obigen Code muss entsprechend der tatsächlichen Situation ersetzt werden. Im Allgemeinen muss das Backend die Logik der Suchzuordnung verarbeiten und relevante Zuordnungsergebnisse zurückgeben. Sie können den Code entsprechend der tatsächlichen Situation des Backends ändern.

Das Obige sind die detaillierten Schritte und spezifischen Codebeispiele für die Verwendung von HTML, CSS und jQuery zum Erstellen einer dynamischen Suchzuordnungsfunktion. Durch diese Funktion können Benutzer während der Eingabe von Schlüsselwörtern in Echtzeit relevante Suchassoziationsergebnisse erhalten, was den Komfort und die Genauigkeit der Suche verbessert. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine dynamische Suchvorhersagefunktion mit HTML, CSS und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!