简介PHP结合AJAX实现搜索提示功能，有时候我们需要为搜索框加上自动完成功能，也就是搜索提示。方法如下：首先将创建一个输入框；然后监听输入框的keyup事件，当事件触发时，使用AJAX请求将输入的内容发送给PHP；接着PHP根据输入的内容进行数据查找并返回；最后将返回的数据进行渲染即可。JS代码：$(document).ready(function(){varxhr=null;$(‘input[na
PHP结合AJAX实现搜索提示功能，有时候我们需要为搜索框加上自动完成功能，也就是搜索提示。
方法如下：
首先将创建一个输入框；然后监听输入框的keyup事件，当事件触发时，使用AJAX请求将输入的内容发送给PHP；接着PHP根据输入的内容进行数据查找并返回；最后将返回的数据进行渲染即可。
JS代码：
$(document).ready(function(){varxhr=null;$('input[name="keyword"]').keyup(function(){if(xhr){xhr.abort();//如果存在ajax的请求，就放弃请求}varinputText=$.trim(this.value);if(inputText!=""){//检测键盘输入的内容是否为空，为空就不发出请求xhr=$.ajax({type:'GET',url:'service/suggestion.php',cache:false,//不从浏览器缓存中加载请求信息data:"keyword="+inputText,//向服务器端发送的数据dataType:'json',//服务器返回数据的类型为jsonsuccess:function(json){if(json.length!=0){//检测返回的结果是否为空varlists="<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();//输入框失去焦点的时候就隐藏搜索框});});
服务端：
<?phpsession_start();functionconnectDb(){//连接数据库的函数$db_server="localhost";$db_name="test";//数据库的名称$db_user="root";//数据库的用户名，不同的用户权限不同$db_pwd="";//数据库的密码$dsn="mysql:host=$db_server;dbname=$db_name;charset=utf8";//使用PDO的方法连接数据库try{$connect=newPDO($dsn,$db_user,$db_pwd,array(PDO::ATTR_PERSISTENT=>true));//如果需要数据库长连接，需要最后加一个参数}catch(PDOException$e){exit('数据库连接失败');}return$connect;}functiontest($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);echojson_encode($suggestion);//输出查询的结果（json格式输出）?>
以上就是PHP结合AJAX实现搜索提示功能的详细内容，具体应用到项目中还需要跟母实际情况改写，这里仅仅一共一种思路。大家可以根据以上方法进行拓展！
下载链接：网站源码/小程序源码/网站模板下载
