AJAX实现google搜索建议实战

时间：2021-09-15 03:47:54

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

AJAX实现google搜索建议实战

整体思路：

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

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

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

编写顺序为：

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

具体实现：

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

 SET NAMES UTF8;
 DROP DATABASE IF EXISTS fanfan;
 CREATE DATABASE fanfan CHARSET=UTF8;
 USE fanfan;
 //创建books表
 CREATE TABLE books(
     bid INT PRIMARY KEY AUTO_INCREMENT,
     bname ),
     price ,)
 );
 //插入8条记录
 INSERT INTO books VALUES
 (),
 (),
 (),
 (),
 (),
 (),
 (),
 ();

fanfan.sql

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

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

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

book_search.php

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

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>ajax search</title>
         <style type="text/css">
             .container {
                 position: relative;
             }
             .container #suggest {
                 position: absolute;
                 top: 100%;
                 margin: 0;
                 padding: 0;
                 list-style: none;
                 border: 1px solid #ccc;
                 width: 200px;
                 display: none;
             }
             .container #suggest li {
                 line-height: 2em;
                 padding: 0 10px;
             }
             .container #suggest li:hover {
                 background: #eee;
             }
         </style>
     </head>
     <body>
         <h3>书籍搜索</h3>
         <div class="container">
             <input type="text" id="search" /><button>搜索</button>
             <ul id="suggest">

             </ul>
         </div>
     </body>
 </html>

book_search.html

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

 <script>
 search.onkeyup=function(){
     var kw=this.value;//获取input中的值
     if(!kw){
         return;//若空白，则不请求
     }
     var xhr=new XMLHttpRequest();//第一步，新建xhr对象
     xhr.onreadystatechange=function(){//第二步，监听状态
         if(xhr.readyState===4){
             if(xhr.status===200){
                 doResponse(xhr);
             }else{
                 console.log('响应成功但是有问题');
             }
         }
     }
     xhr.open('GET',`book_search.php?kw=${kw}`,true);//打开连接
     xhr.send(null);//发送连接
     function doResponse(xhr){//消息处理
         console.log(xhr);
         if(xhr.responseText===""){
             suggest.style.display='none';
         }else{
             suggest.innerHTML=xhr.responseText;
             suggest.style.display='block';
         }
     }
 }
 </script>

AJAX

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

相关文章