How to create a dynamic search prediction function using HTML, CSS and jQuery

How to use HTML, CSS and jQuery to create a dynamic search association function

With the development of the Internet, the search function has become indispensable in our daily lives a part of. In order to improve users' search experience, dynamic search association functions have become a common requirement. This article will introduce how to use HTML, CSS and jQuery to create a simple and effective search prediction function, and provide specific code examples.

1. Preparation

First of all, we need to prepare relevant resources. Make sure you have the latest version of jQuery installed and in your HTML page add:

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

2. HTML structure

Next, we need to build the HTML structure. Add an area after an input box to display the search prediction results, for example:

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

3. CSS style

In order to make the search prediction results appear in the appropriate format on the page Style rendering, we need to add some CSS styles. The following is a simple CSS example:

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

This CSS code will provide some basic styles for the display area of ​​the search prediction results.

4. jQuery implementation

Now, let’s implement the search association function. The following is a basic code example:

$(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 this code, we first listen to the input event of the input box. Once there is text input in the input box, we send a request to The backend obtains search association results. Then, a list of search prediction results is built based on the results returned by the backend and displayed on the page.

At the same time, we also monitored the click event of the search prediction result list item. When the user clicks on a prediction result, the result is filled into the input box and the search prediction result is hidden.

Finally, we also monitor click events in other areas of the page. When the user clicks on other areas of the page, the search association results are hidden.

5. Backend processing

The Ajax request part in the above code needs to be replaced according to the actual situation. Generally, the backend is required to process the logic of searching for associations and return relevant association results. You can modify the code according to the actual situation of the backend.

The above are the detailed steps and specific code examples for using HTML, CSS and jQuery to create a dynamic search association function. Through this function, users can obtain relevant search association results in real time during the process of entering keywords, which improves the convenience and accuracy of search. Hope this article helps you!

The above is the detailed content of How to create a dynamic search prediction function using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!