Comment créer une fonction de prédiction de recherche dynamique en utilisant HTML, CSS et jQuery

Comment utiliser HTML, CSS et jQuery pour créer une fonction d'association de recherche dynamique

Avec le développement d'Internet, les fonctions de recherche sont devenues un élément indispensable de notre vie quotidienne. Afin d'améliorer l'expérience de recherche des utilisateurs, les fonctions d'association de recherche dynamique sont devenues une exigence courante. Cet article expliquera comment utiliser HTML, CSS et jQuery pour créer une fonction de prédiction de recherche simple et efficace, et fournira des exemples de code spécifiques.

1. Préparation

Tout d'abord, nous devons préparer des ressources pertinentes. Assurez-vous d'avoir installé la dernière version de jQuery et ajoutez dans votre page HTML :

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

2. Structure HTML

Ensuite, nous devons construire la structure HTML. Ajoutez une zone pour afficher les résultats de prédiction de recherche après une zone de saisie, par exemple :

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

3. Style CSS

Afin que les résultats de prédiction de recherche apparaissent dans le style approprié sur la page, nous devons ajouter des styles CSS . Voici un exemple CSS simple :

#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;
}

Ce code CSS fournira un style de base pour la zone d'affichage des résultats de prédiction de recherche.

4. Implémentation de jQuery

Maintenant, implémentons la fonction d'association de recherche. Voici un exemple de code de base :

$(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();
        }
    });
});

Dans ce code, nous écoutons d'abord l'événement input de la zone de saisie. Une fois le texte saisi dans la zone de saisie, nous envoyons une requête au backend via Ajax pour obtenir la recherche. résultats associatifs. Ensuite, une liste de résultats de prédiction de recherche est construite sur la base des résultats renvoyés par le backend et affichés sur la page.

Dans le même temps, nous avons également surveillé l'événement de clic de l'élément de la liste des résultats de prédiction de recherche. Lorsque l'utilisateur clique sur un résultat de prédiction, le résultat sera rempli dans la zone de saisie et le résultat de prédiction de recherche sera masqué.

Enfin, nous surveillons également les événements de clic dans d'autres zones de la page. Lorsque l'utilisateur clique sur d'autres zones de la page, les résultats de l'association de recherche sont masqués.

5. Traitement backend

La partie requête Ajax dans le code ci-dessus doit être remplacée en fonction de la situation réelle. Généralement, le backend est requis pour gérer la logique de l'association de recherche et renvoyer les résultats d'association pertinents. Vous pouvez modifier le code en fonction de la situation réelle du backend.

Ci-dessus sont les étapes détaillées et des exemples de code spécifiques pour utiliser HTML, CSS et jQuery pour créer une fonction d'association de recherche dynamique. Grâce à cette fonction, les utilisateurs peuvent obtenir des résultats d'association de recherche pertinents en temps réel pendant le processus de saisie de mots-clés, ce qui améliore la commodité et la précision de la recherche. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!