Ajax实现搜索联想自动补全

作者：System 时间：2024年08月14日分类：所有,ajax 字数：1584

以下是一个使用jQuery和Ajax实现搜索联想自动补全的简单示例：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search Suggest</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="searchInput" placeholder="Search...">
    <div id="suggestList"></div>
 
    <script src="script.js"></script>
</body>
</html>

JavaScript部分 (jQuery和Ajax):




$(document).ready(function() {
    $('#searchInput').keyup(function() {
        var searchTerm = $(this).val();
        if (searchTerm.length >= 1) {
            $.ajax({
                url: 'search.php', // 替换为你的后端URL
                type: 'GET',
                data: {term: searchTerm},
                success: function(data) {
                    var suggestList = $('#suggestList');
                    suggestList.empty(); // 清空之前的结果
                    if (data.length > 0) {
                        $.each(data, function(index, suggestion) {
                            suggestList.append('<div>' + suggestion + '</div>');
                        });
                    }
                }
            });
        }
    });
});

后端PHP示例 (search.php):




<?php
$searchTerm = $_GET['term'];
 
// 模拟搜索结果
$suggestions = [
    "{$searchTerm} suggestion 1",
    "{$searchTerm} suggestion 2",
    "{$searchTerm} suggestion 3"
];
 
// 假设这是从数据库或其他服务中获取的搜索建议
header('Content-Type: application/json');
echo json_encode($suggestions);
?>

确保你的服务器配置允许通过Ajax进行跨域请求。如果你使用的是PHP，记得修改search.php中的代码以匹配你的数据源。

Ajax实现搜索联想自动补全

评论已关闭

推荐阅读