HTML、CSS、jQueryを使って動的検索予測機能を作成する方法

HTML、CSS、jQuery を使用して動的な検索関連付け機能を作成する方法

インターネットの発展に伴い、検索機能は私たちの日常生活に欠かせないものになりました。の一部。ユーザーの検索エクスペリエンスを向上させるために、動的な検索関連付け機能が一般的な要件になっています。この記事では、HTML、CSS、jQuery を使用して簡単で効果的な検索予測機能を作成する方法と、具体的なコード例を紹介します。

1. 準備

まず、関連するリソースを準備する必要があります。最新バージョンの jQuery がインストールされていることを確認し、HTML ページに次の内容を追加します。

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

2. HTML 構造

次に、HTML 構造を構築する必要があります。入力ボックスの後に領域を追加して、検索予測結果を表示します。例:

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

3. CSS style

検索予測結果を適切な場所に表示するにはページのスタイルのレンダリングでは、いくつかの CSS スタイルを追加する必要があります。以下は簡単な CSS の例です:

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

この CSS コードは、検索予測結果の表示領域にいくつかの基本スタイルを提供します。

4. jQuery の実装

次に、検索関連付け機能を実装しましょう。以下は基本的なコード例です:

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

このコードでは、まず入力ボックスの input イベントをリッスンします。入力ボックスにテキストが入力されると、 request to バックエンドは検索関連付けの結果を取得します。次に、バックエンドから返された結果に基づいて検索予測結果のリストが作成され、ページに表示されます。

同時に、検索予測結果リスト項目のクリックイベントも監視し、ユーザーが予測結果をクリックすると入力ボックスに結果が入力され、検索予測結果が非表示になります。

最後に、ページの他の領域のクリック イベントも監視します。ユーザーがページの他の領域をクリックすると、検索関連付けの結果は非表示になります。

5. バックエンド処理

上記コードのAjaxリクエスト部分は、実際の状況に応じて置き換える必要があります。通常、バックエンドは検索ロジックを処理する必要があります。関連付けの場合は、関連する関連付けの結果を返します。バックエンドの実際の状況に応じてコードを変更できます。

上記は、HTML、CSS、および jQuery を使用して動的検索関連付け関数を作成するための詳細な手順と具体的なコード例です。この機能により、ユーザーはキーワードを入力する過程でリアルタイムに関連する検索結果を得ることができ、検索の利便性と精度が向上します。この記事がお役に立てば幸いです!

以上がHTML、CSS、jQueryを使って動的検索予測機能を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。