搜寻联想利用十分宽泛，百度，谷歌，搜狗，淘宝，天猫，京东，以及很多网站都有，只须要打上几个字，就有相干的搜寻提醒。
实现办法
通过javascript监听搜寻框的内容，调用后端即可。
（1）javascript监听搜寻框的内容
（2）把搜寻框的关键词传给后端进行搜寻
（3）搜寻到后果，遍历到页面
演示
代码
index.html
<!DOCTYPE html><html><head> <title>test</title> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> #input-content{ width: 350px; height: 200px; margin:100px auto 20px; } #input-content input{ width: 100%; height: 50px; text-indent: 15px; font-size: 18px; outline: none; border:2px solid #333; border-radius: 100px; } /*输入框底部黄色背景去除*/ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; } input[type=text]:focus, input[type=password]:focus, textarea:focus { -webkit-box-shadow: 0 0 0 1000px white inset; } </style></head><body><!-- 表单 --><form> <div id="input-content"> <h1>Ajax无刷新搜寻</h1> <input id="inputView" type="text" name="keyword" placeholder="请输出关键词"> <div></form><!-- 搜寻后果 --><div id="result"></div><!-- 监听输入框 --><script type="text/javascript">$("#inputView").bind("input propertychang",function(event){ var keyword = $.trim(this.value); // ajax搜寻 $.ajax({ type: "GET", url: "server.php?keyword="+keyword, success:function(data){ if (keyword == '') { $("#result").html("<p>关键词不得为空</p>"); } else if (data[0].code == 202) { $("#result").html("<p>暂无搜寻后果</p>"); } else { // 用empty()清空append() $("#result").empty(); // 再循环遍历列表 for (var a in data){ var resname = data[a].resname; $("#result").append("<p>"+resname+"</p>"); } } }, error : function() { console.log("服务器谬误") } });});</script></body></html>server.php
<?phpheader("Content-type:application/json");// 创立连贯$conn = new mysqli("数据库服务器", "数据库账号", "数据库明码","数据库名");// 取得关键词$keyword = trim($_GET["keyword"]);// 过滤关键词if(empty($keyword)){ $results_search = array( "code" => "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