JQuery
基于 jQuery+PHP+Mysql实现输入自动完成提示
本文将使用jquery ui的autocomplete插件，结合后端PHP，数据源通过PHP读取mysql数据表的数据,有需要的朋友可以参考一下。
| 代码如下 | 复制代码 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="输入提示，自动补全,jquery" /> <meta name="description" content="shuro's blog演示平台，演示XHTML、CSS、jquery、PHP案例和示例" /> <title>jQuery+PHP+Mysql实现输入自动完成提示的功能</title> <link rel="stylesheet" type="text/css" href="../Css/main.css" /> <link rel="stylesheet" href="./Css/jquery.ui.autocomplete.css"> <style type="text/css"> #demo{width:500px; height:40px; line-height:40px; margin:20px auto} input{border:1px solid #ccc; width:360px; height:26px; line-height:26px; padding:2px; font-size:14px; color:#666} </style> <script type="text/javascript" src="../Script/jquery.js"></script> <script type="text/javascript" src="./Script/ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./Script/ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./Script/ui/jquery.ui.position.js"></script> <script type="text/javascript" src="./Script/ui/jquery.ui.autocomplete.js"></script> <script type="text/javascript"> $(function(){ $( "#key" ).autocomplete({ source: "search.php", minLength: 2, autoFocus: true }); }); </script> </head> <body> <div id="header"> <div id="logo"> </div> </div> <div id="main"> <h2 class="top_title"><a href="http://www.shuro.cn/?p=22">jQuery+PHP+Mysql实现输入自动完成提示的功能</a></h2> <p style="height:32px; line-height:32px; margin-top:40px; padding-left:200px">分别输入英文关键词“jQuery”和中文关键词“使用”看看效果：</p> <div id="demo"> <input type="text" id="key" name="key" /> </div> </div> <div id="footer"> <p>Powered by Shuro's Blog 允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.shuro.cn/">www.shuro.cn</a></p> </div> | |
话题作者
头衔:无
活跃成员
