使用jquery+ajax+php实现搜索框的功能

Posted 小果同学

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用jquery+ajax+php实现搜索框的功能相关的知识,希望对你有一定的参考价值。

首先是客户端

新建一个输入框

<input  type="text" id="keyword" name="keyword" />  

 

在输入框的下面创建一个div,先让他隐藏起来

<div id="searchBox" display: none"></div>  

注:搜索框的定位可以使用绝对定位,定在输入框的下面,搜索按钮可以加在输入框的旁边,同样也是使用绝对定位 

接下来是使用jq发送ajax请求(这里使用的是json格式的数据)

<script>  
    $(document).ready(function(){  
        var xhr=null;  
        $(input[name="keyword"]).keyup(function() {  
              if(xhr){  
                  xhr.abort();//如果存在ajax的请求,就放弃请求  
              }  
            var inputText= $.trim(this.value);  
            if(inputText!=""){//检测键盘输入的内容是否为空,为空就不发出请求  
            xhr=$.ajax({  
                type: GET,  
                url: service/suggestion.php,  
                cache:false,//不从浏览器缓存中加载请求信息  
                data: "keyword=" + inputText,//向服务器端发送的数据  
                dataType: json,//服务器返回数据的类型为json  
                success: function (json) {  
                    if (json.length != 0) {//检测返回的结果是否为空  
                        var lists = "<ul>";  
                        $.each(json, function () {  
                            lists += "<li>"+this.pd_name+"</li>";//遍历出每一条返回的数据  
                        });  
                        lists+="</ul>";  
  
                        $("#searchBox").html(lists).show();//将搜索到的结果展示出来  
  
                        $("li").click(function(){  
                            $("#keyword").val($(this).text());//点击某个li就会获取当前的值  
                            $("#searchBox").hide();  
                        })  
  
                    } else {  
                        $("#searchBox").hide();  
                    }  
  
  
                }  
  
            });  
            }else{  
                $("#searchBox").hide();//没有查询结果就隐藏搜索框  
            }  
        }).blur(function(){  
            $("#searchBox").hide();//输入框失去焦点的时候就隐藏搜索框  
        });  
  
    });  
</script>  

服务端使用PHP语句连接数据库,然后进行查询(这里使用的是PDO连接的方法)

<?php  
session_start();  
  
function connectDb(){//连接数据库的函数  
$db_server="localhost";  
$db_name="test";//数据库的名称  
$db_user="root";//数据库的用户名,不同的用户权限不同  
$db_pwd="";//数据库的密码  
$dsn="mysql:host=$db_server;dbname=$db_name;charset=utf8";//使用PDO的方法连接数据库  
  
try{  
$connect=new PDO($dsn,$db_user,$db_pwd,array(PDO::ATTR_PERSISTENT=>true));//如果需要数据库长连接,需要最后加一个参数  
  
}  
catch(PDOException $e){  
    exit(‘数据库连接失败‘);  
}  
    return $connect;  
  
}  
  
function test($keyword){//从数据库中查找关键字的函数  
$db=connectDb();  
$result=$db->prepare("select 字段名 from 数据库名字 where 字段名 like ?");  
$result->bindParam(1,$keyword);//第一个问号的值  
$result=>execute;  
  
return $result->fetchAll(PDO::FETCH_ASSOC);  
  
  
}  
  
$keyword=$_GET[‘keyword‘];//获取输入框的内容  
  
$suggestion=test($keyword);  
  
echo json_encode($suggestion);//输出查询的结果(json格式输出)  
  
?>  

注:服务端的函数最好写在别的页面,方便管理。


这样,搜索框的功能就能实现了。学习笔记,仅供参考~~

以上是关于使用jquery+ajax+php实现搜索框的功能的主要内容,如果未能解决你的问题,请参考以下文章

使用jQuery-UI来实现一个Ajax的自动完成功能(自动填充搜索框的下拉值)

ajax+JQuery实现类似百度智能搜索框

使用 ajax php mysql 实现分页搜索

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

如何使用配置了ajax搜索的select2 jquery插件实现选择所有功能。?

搜索自动提示的简单模拟JQuery