Ajax实现搜索联想 搜索关键词提醒 无刷新搜索

搜索联想应用非常广泛，百度，谷歌，搜狗，淘宝，天猫，京东，以及很多网站都有，只需要打上几个字，就有相关的搜索提示。

实现方法

通过javascript监听搜索框的内容，调用后端即可。
（1）javascript监听搜索框的内容
（2）把搜索框的关键词传给后端进行搜索
（3）搜索到结果，遍历到页面

演示

代码

index.html

    
    
    
    





    

       
Ajax无刷新搜索
       
    

server.php

 "201",
        "msg" => "关键词不得为空"
    );
}else{
    mysqli_query($conn, "SET NAMES UTF-8"); //utf8 设为对应的编码
    $sql_search = "SELECT * FROM 表名 WHERE 需要搜索的字段 LIKE '%$keyword%' ORDER BY ID DESC";
    $result_search = $conn->query($sql_search);
    
    if ($result_search->num_rows > 0) {
        // 结果集是一个数组
        $results_search = array();
        while($row_search = $result_search->fetch_assoc()) {
            // 把搜索结果集存进一个数组
            $results_search[] = $row_search;
        }
    } else {
        // 搜索无果
        $results_search[] = array(
            "code" => "202",
            "msg" => "暂无搜索结果"
        );
    }
    
    // 断开数据库连接
    $conn->close();
}
// 返回结果
echo json_encode($results_search,JSON_UNESCAPED_UNICODE);
?>

DEMO

http://www.likeyunba.com/demo...

Author:TANKING
Date:2020-11-14
Web:http://www.likeyun.cn/
WeChat:face6009