web development blog

> 编程 jquery.ui自动完成搜索提示应用

jQuery ui的更新很快,丰富的ui组件,带给我们很多开发上的便利。本文围绕jQuery的自动完成搜索提示组件(autocomplete)为话题,谈谈自己在开发中,对它使用的理解和心得。

至于jquery.ui.autocomplete的api基础,这里就不多说,可以参考官方网站,或者本人简单整理了一个txt文档,有兴趣的点击这里。在使用中,可以进行一些优化,对多个css文件的整合,可以减少http的请求数。对搜索返回结果进行数据缓存,提高用户体验,和减轻服务器压力。

当前插件关联的文件:

//css样式文件
	jq.ui.ac.min.css ---整合的css文件
		|-- jquery.ui.core.css
		|-- jquery.ui.autocomplete.css
		|-- jquery.ui.theme.css

//js脚本文件
	jquery-1.7.2.js
	jquery.ui.core.js
	jquery.ui.widget.js
	jquery.ui.position.js
	jquery.ui.autocomplete.js

//php程序文件
	apiData/index.php

插件的实际应用开发

特别css样式:
.ui-autocomplete-loading { 
	background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
html结构:
<div class="ui-widget">
	<label for="sInput">搜索: </label>
	<input id="sInput" value="请输入搜索关键字...">
</div>
js脚本:
var cache = {},sInput=$("#sInput" ),lastXhr;
	sInput.data('initValue',sInput.val());
	sInput.focus(function(){if($(this).val()==sInput.data('initValue')) $(this).val('');})
  		.blur(function(){if($(this).val()=='') $(this).val(sInput.data('initValue'));})
		.autocomplete({
		minLength: 2,
		source: function( request, response ) {
			var term = request.term;
			if ( term in cache ) {
				response( cache[ term ] );
				return;
			}
			lastXhr = $.getJSON('apiData/?action=new', request, function( data, status, xhr ) {
				cache[ term ] = data;
				if ( xhr === lastXhr ) {
					response( data );
				}
			});
		},
		select:function(event,ui){
			//选中做什么事情
			alert(ui.item.link)
		}
	});
返回数据程序代码:
header("Content-type: text/html;charset=utf-8");
$action = isset($_GET['action'])? $_GET['action']:'';
$term = isset($_GET['term'])? $_GET['term']:'';
$echo_json = array();
switch($action){
	case "new":
		//测试模拟数据
		for($i=0;$i<5;$i++){
			$echo_json[$i]['label']="模拟数据".$term.$i;
			$echo_json[$i]['value']=$i;
			$echo_json[$i]['link']=$i;
		}
	break;
}
echo json_encode($echo_json);
exit;
FireFox分析流程图:

自动完成搜索提示组件实际应用分析图

分析总结:

第一点:特别css,是向服务器请求等待反应结果过程中状态loading样式,为了提高用户体验;

第二点:js脚本
cache:定义一个全局变量,缓存数据,避免用户每次搜索都向服务器请求,而是首先在缓存里面查找,是否存在。
lastXhr:HTTPRequire请求标识,确保无误
minLength:设置用户输出最小字符长度,超过才触发请求
term:ajax想服务器请求中,用户输入查询值的term=?
data:服务器返回的数据json data,每item一个要label和value,或者其他自定义key/value
ui:select:function(event,ui)中的ui就是选中那一个item对象

第三点:返回数据源程序,如果实际应用中,这里可以根据自己的应用程序数据存储方式,从相应的地方取出搜索结果记录,只要拼接成自己想要的返回数据数组结构,最后利用json_encode函数处理,最后输出即可

最后,附上本文演示demo的源文件:下载点击 这里

-留言评论-

  • 留言载入中...

-拍砖-

 

首页|前端技术|编程/php|生活|关于我

Copyright © 2012 wmhfly.com