搜索
首页后端开发php教程PHP结合AJAX实现搜索提示功能

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

May 20, 2020 pm 05:32 PM
ajaxphp

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

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

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

示例代码

客户端:

<script>  
    $(document).ready(function(){  
        var xhr=null;  
        $(&#39;input[name="keyword"]&#39;).keyup(function() {  
              if(xhr){  
                  xhr.abort();//如果存在ajax的请求,就放弃请求  
              }  
            var inputText= $.trim(this.value);  
            if(inputText!=""){//检测键盘输入的内容是否为空,为空就不发出请求  
            xhr=$.ajax({  
                type: &#39;GET&#39;,  
                url: &#39;service/suggestion.php&#39;,  
                cache:false,//不从浏览器缓存中加载请求信息  
                data: "keyword=" + inputText,//向服务器端发送的数据  
                dataType: &#39;json&#39;,//服务器返回数据的类型为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  
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(&#39;数据库连接失败&#39;);  
}  
    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[&#39;keyword&#39;];//获取输入框的内容  
  
$suggestion=test($keyword);  
  
echo json_encode($suggestion);//输出查询的结果(json格式输出)  
  
?>

推荐教程:《PHP教程

以上是PHP结合AJAX实现搜索提示功能的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
PHP的完整形式是什么?PHP的完整形式是什么?Apr 28, 2025 pm 04:58 PM

文章讨论了PHP,详细介绍了其完整形式,在We​​b开发中的主要用途,与Python和Java的比较以及对初学者的学习便利性。

PHP如何处理形式数据?PHP如何处理形式数据?Apr 28, 2025 pm 04:57 PM

PHP使用$ \ _ post和$ \ _获取超级全局的php处理数据,并通过验证,消毒和安全数据库交互确保安全性。

PHP和ASP.NET有什么区别?PHP和ASP.NET有什么区别?Apr 28, 2025 pm 04:56 PM

本文比较了PHP和ASP.NET,重点是它们对大规模Web应用程序,性能差异和安全功能的适用性。两者对于大型项目都是可行的,但是PHP是开源和无关的,而ASP.NET,

PHP是对病例敏感的语言吗?PHP是对病例敏感的语言吗?Apr 28, 2025 pm 04:55 PM

PHP的情况敏感性各不相同:功能不敏感,而变量和类是敏感的。最佳实践包括一致的命名和使用对案例不敏感的功能进行比较。

您如何重定向PHP中的页面?您如何重定向PHP中的页面?Apr 28, 2025 pm 04:54 PM

本文讨论了PHP中针对页面重定向的各种方法,重点关注header()函数,并解决了诸如“标题已经发送”错误之类的常见问题。

解释PHP中的类型暗示解释PHP中的类型暗示Apr 28, 2025 pm 04:52 PM

文章讨论了PHP中的类型暗示,这是一个用于指定功能中预期数据类型的功能。主要问题是通过类型执法提高代码质量和可读性。

PHP中的PDO是什么?PHP中的PDO是什么?Apr 28, 2025 pm 04:51 PM

本文讨论了PHP数据对象(PDO),这是PHP中数据库访问的扩展名。它通过准备好的语句及其对MySQLI的好处,包括数据库抽象和更好的错误处理,强调了PDO在增强安全性方面的作用。

如何在PHP中创建API?如何在PHP中创建API?Apr 28, 2025 pm 04:50 PM

文章讨论了创建和保护PHP API,详细介绍了从端点定义到使用Laravel和最佳安全实践等框架优化性能优化的步骤。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器