首页 > 代码库 > AJAX实现google搜索建议实战

AJAX实现google搜索建议实战

2024-08-20 17:42:21   221人阅读

搜索建议实战的目标是为了输入搜索内容，动态的进行匹配，效果图如下：

技术分享

整体思路：

在客户端搜索框中触发onkeyup事件，

随时向PHP服务器请求当前输入框中的内容，

PHP服务器获取到keywords后，向数据库中模糊查找相关的数据

 

编写顺序为：

　　SQL---->PHP------>HTML----->CSS----->JavaScript

 

具体实现：

　　第一步：创建一个数据库(fanfan.sql)，向books表中插入若干条记录

技术分享 
 1 SET NAMES UTF8;
 2 DROP DATABASE IF EXISTS fanfan;
 3 CREATE DATABASE fanfan CHARSET=UTF8;
 4 USE fanfan;
 5 //创建books表
 6 CREATE TABLE books(
 7     bid INT PRIMARY KEY AUTO_INCREMENT,
 8     bname VARCHAR(32),
 9     price FLOAT(5,2)
10 );
11 //插入8条记录
12 INSERT INTO books VALUES
13 (NULL,‘HTML权威指南‘,45),
14 (NULL,‘CSS权威指南‘,55),
15 (NULL,‘JavaScript权威指南‘,95),
16 (NULL,‘HTTP权威指南‘,35),
17 (NULL,‘HTML从入门到精通‘,35),
18 (NULL,‘CSS从入门到精通‘,45),
19 (NULL,‘JavaScript从入门到精通‘,85),
20 (NULL,‘HTTP从入门到精通‘,35);
fanfan.sql

　　第二步：创建一个PHP文件，用于从数据库查询符合条件的数据库。接收客户端提交的搜索关键字kw，执行模糊查询，把包含搜索关键字的记录全部查询出来，以HTML片段形式返回，形如： 

<li>JavaScrupt从入门到精通</li>
<li>HTTP从入门到精通</li>

技术分享 
 1 <?php
 2 header(‘Content-Type:text/html;charset=UTF-8‘);//设置响应格式为html
 3 @$keywords=$_REQUEST[‘kw‘] or die(‘kw required‘);//获取客户端请求的数据
 4 $conn=mysqli_connect(‘127.0.0.1‘,‘root‘,‘‘,‘fanfan‘,3306);//连接数据库
 5 $sql=‘SET NAMES UTF8‘;
 6 mysqli_query($conn,$sql);
 7 $sql="SELECT bname FROM books WHERE bname LIKE ‘%$keywords%‘";//模糊匹配含有关键字的记录行
 8 $result=mysqli_query($conn,$sql);
 9 $list =mysqli_fetch_all($result,MYSQLI_ASSOC);//抓取所有符合条件的记录行
10 foreach($list as $book){
11     echo "<li>$book[bname]</li>";//遍历上一步结果的关联数组
12 }
13 ?>
book_search.php

　　第三步：创建一个HTML文件，包含搜索框，并设置样式

技术分享 
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>ajax search</title>
 6         <style type="text/css">
 7             .container {
 8                 position: relative;
 9             }
10             .container #suggest {
11                 position: absolute;
12                 top: 100%;
13                 margin: 0;
14                 padding: 0;
15                 list-style: none;
16                 border: 1px solid #ccc;
17                 width: 200px;
18                 display: none;
19             }
20             .container #suggest li {
21                 line-height: 2em;
22                 padding: 0 10px;
23             }
24             .container #suggest li:hover {
25                 background: #eee;
26             }
27         </style>
28     </head>
29     <body>
30         <h3>书籍搜索</h3>
31         <div class="container">
32             <input type="text" id="search" /><button>搜索</button>
33             <ul id="suggest">
34                 
35             </ul>
36         </div>
37     </body>
38 </html>
book_search.html

　　第四步：用原生的AJAX，经过四步固定套路，获取第二步中得到的结果，懒得新建一个js文件，直接把script部分的代码，放到HTML网页中</body>之前即可

技术分享 
 1 <script>
 2 search.onkeyup=function(){
 3     var kw=this.value;//获取input中的值
 4     if(!kw){
 5         return;//若空白，则不请求
 6     }
 7     var xhr=new XMLHttpRequest();//第一步，新建xhr对象
 8     xhr.onreadystatechange=function(){//第二步，监听状态
 9         if(xhr.readyState===4){
10             if(xhr.status===200){
11                 doResponse(xhr);
12             }else{
13                 console.log(‘响应成功但是有问题‘);
14             }
15         }
16     }
17     xhr.open(‘GET‘,`book_search.php?kw=${kw}`,true);//打开连接
18     xhr.send(null);//发送连接
19     function doResponse(xhr){//消息处理
20         console.log(xhr);
21         if(xhr.responseText===""){
22             suggest.style.display=‘none‘;
23         }else{
24             suggest.innerHTML=xhr.responseText;
25             suggest.style.display=‘block‘;
26         }
27     }
28 }
29 </script>
AJAX

最后，可以验证结果了，打开网址http://127.0.0.1/fanfan/book_search.html（我的本地设置的地址），即可查看效果啦~前提XAMPP打开着。。

 

AJAX实现google搜索建议实战


联系
我们