您的位置：首页 > Web前端 > JQuery

基于 jQuery+PHP+Mysql实现输入自动完成提示

2013-09-05 20:24 1151 查看

本文将使用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航