php mysql ajax搜索提示键盘_PHP结合AJAX实现搜索提示功能

PHP结合AJAX实现搜索提示功能

首先将创建一个输入框；然后监听输入框的keyup事件，当事件触发时，使用AJAX请求将输入的内容发送给PHP；接着PHP根据输入的内容进行数据查找并返回；最后将返回的数据进行渲染即可。

示例代码

客户端：

$(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+="

";

$("#searchBox").html(lists).show();//将搜索到的结果展示出来

$("li").click(function(){

$("#keyword").val($(this).text());//点击某个li就会获取当前的值

$("#searchBox").hide();

})

} else {

$("#searchBox").hide();

}

}

});

}else{

$("#searchBox").hide();//没有查询结果就隐藏搜索框

}

}).blur(function(){

$("#searchBox").hide();//输入框失去焦点的时候就隐藏搜索框

});

});

服务端：<?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教程》