PHP+jQueryUI实现自动完成提示

一直都没有时间研究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/

作者:Yinchiang

i'm X

4条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

评论审核已启用。您的评论可能需要一段时间后才能被显示。