一直都没有时间研究jQuery 的UI插件，今天下载下来研究下，全是英文文档，捣鼓半天，搞定几个自动完成、日期选择效果等等。
jqueryui下载请到这里下载：http://jqueryui.com/
jQuery UI包含了日期选择器，文本框、复选框、下拉列表等等一系列我们网页常用的UI封装，使得我们的网站UI开发变得如此简单。优点不只上面这些还有很多，缺点就是文件比较大。呵呵不说这些，首先我给大家演示一个ajax自动完成的效果。
关于ajax自动完成，首先我们要建立一张数据表
CREATE TABLE `demo` ( `id` int(4) NOT NULL AUTO_INCREMENT, `title` varchar(50) NOT NULL COMMENT '标题', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8
自己加入数据哦，不要让表空空的就成，不然就什么效果都看不到了。
然后新建一个html文件，导入jquery+jqueryUI包
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">请输入关键字: </label>
<input id="autocomplete">
<script>
$("#autocomplete").autocomplete({
source: "http://127.0.0.1/demo/autocomplete.php",
minLength: 1 ,
});
</script>
</body>
</html>
之后我们就新建一个名叫“autocomplete.php”的文件（自己注意路径问题哦），里面写上
include_once("database.php"); //连接数据库
$k= strtolower($_GET["term"]); //获取用户输入的内容
$query=mysql_query("select id,title from demo where title like '$k%' limit 0,10");
//查询数据库，并将结果集组成数组
while ($row=mysql_fetch_array($query)) {
$result[] = array(
'id' => $row['id'],
'label' => $row['title']
);
}
echo json_encode($result); //输出JSON数据
然后运行html，在进行搜索时效果如下，^-^
关于jqueryUI的日期控件问题就是我们需要汉化或者格式化日期，小贤愚钝目前还没有发现jqueryui的日期控件格式化时分秒的显示……（经过一天的闭门思过终于发现要想使用时分秒的格式，还需要添加一个插件，“jquery-ui-slide.min.js”和“jquery-ui-timepicker-addon.js”）具体请参见：http://trentrichardson.com/examples/timepicker/ 实现效果如下图所示：
只需要在显示的页面中设置日期控件的配置就行了
$('#datepicker').datepicker('option', 'monthNames', ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']);
$('#datepicker').datepicker('option', 'dateFormat', 'yy-mm-dd');
$('#datepicker').datepicker('option', 'dayNamesMin', ['日', '一', '二', '三', '四', '五', '六']);
$('#datepicker').datepicker('option', 'dayNames', ['日', '一', '二', '三', '四', '五', '六']);
效果
关于更多的jQueryUI的api请访问这里 http://api.jqueryui.com/。
《“PHP+jQueryUI实现自动完成提示”》 有 4 条评论
HI 請問可以問你嘛?
你好，请问。
就是我都照你打上去了 …. 但是我的php檔案 他一直錯誤是寫 … 找不到term 是什麼意思呢?
term 是默认的get参数，如果没有特殊要求，请不要修改。