首先,将创建一个输入框; 然后将监视输入框的keyup事件,并在触发该事件时使用AJAX请求将输入内容发送到PHP; 然后PHP将根据输入内容搜索并返回数据; 而已。
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 = "
- ";
$.each(json, function () {
lists += "
- "+this.pd_name+" ";//遍历出每一条返回的数据 }); lists+="
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格式输出)
未经允许不得转载:铁东博客 » PHP利用前端AJAX实现搜索返回模糊提示功能