php mysql jquery实现简单检索自动完成提示功能

本文给出了一个php mysql jquery的实例，可以实现简单的自动检索完成提示功能。分享给大家参考，如下：

这段时间看了一些关于自动完成提示的内容，发现大部分实现过程都很复杂。我觉得这应该是一个比较简单的功能，所以自己尝试了一下。这种想法非常传统。需要注意的是，键盘事件不绑定提示内容，只有鼠标操作可用。

Html jQuery内容：

html head style type=' text/CSS ' # AutoBox { margin : 0px；padding: 0pxborder: 1px固体# CCCCCC；宽度： 200 px；} #autoBox li { clear:双双；背景-颜色：白色；color:黑色；相对位置：top: 0pxleft: 0px线高： 25px；宽度width:200px文本-左对齐：飞越：隐藏；} # AutoBox Li : hover { background-color :灰色；颜色：黄色；cursor:指针；}/style script type=' text/JavaScript ' src=' http : js/jquery-1 . 9 . 1 . min . js '/script script type=' text/JavaScript ' $(function(){ $)。Ajax setup({ cache : false })；//不缓存//以下代码用于显示检索提示框$('#autoBox ')。hide()；//在完成提示框$ ('# stusearch ')中隐藏keyup事件。keyup(function(){//输入框在初始化期间激活以下查询行为$('#autoBox ')。html(“”)；//如果($ ('# stusearch ')，则清空并完成提示框的原始内容。val()。length 0)//如果输入框不是空的{$。ajax({ //在后台调用php文件查询type3360' post '，url3360' phpfiles/stusearch.php '，dataType:'json '，data : { key words : $(' # stu search ')。val()}，success : function(feedback data){ $(' # autoBox ')。show()；//显示(i=0)的完成提示框；ifeedbackdata.lengthI) //将结果添加到提示框{$ ('# autobox ')。追加(' Li '反馈数据[I] ['真名']'/Li ')；} $ ('# autobox li ')。on ('click '，function(){//单击这些新Li绑定的事件，并将其值赋给输入框$ ('# stusearch ')。val ($ (this)。text())；}) $ ('# autobox ')。追加(' Li style=' text-align : right ' close/Li ')；//在提示框末尾添加一个li，关闭$ ('# autobox li:last ')。on ('click '，function(){//添加一个click事件，并隐藏提示框$('#autoBox ')。单击后隐藏()；}) } });} })}))/script/head dyinput type=' text ' placeholder='输入要检索的关键字，然后按enter键。id=' stu search ' name=' stu search '/ul id=' autobox '/ul/body/html tussearch . PHP代码

？“php包含”./PHpfiles/ConMySQL . PHP '；$ keywords=$ _ POST[' keywords ']；$myrs=mysql_query('从truename喜欢的用户中选择* ')。$关键词。%'');if($ myrs){ while($ row=MySQL _ fetch _ array($ myrs)){ $ temp[]=$ row；} echo(JSON _ encode($ temp))；}?翻译

输入时：

单击项目后：

更多对PHP相关内容感兴趣的读者可以查看本网站专题：《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》、《php常见数据库操作技巧汇总》、0103010

希望本文对PHP编程有所帮助。