本文介绍基于jquery 的 自动提示单选组件QuickSelect ,笔者对该组件进行修改支持dwr的用法。
1 QuickSelect :
1.1 数据源:
组件的数据来源方式:data,ajax
data: 简单数据源
<script>
$('#ExampleOne_LocalData').quickselect({
maxItemsToShow:10,
data:["Aberdeen", "Ada", "Adamsville", ["Addyston", "Addyston", 'closed'], "Adelphi", "Adena", "Adrian", "Akron"]}) // truncated data...
</script>
ajax:ajax数据源
<script type="text/javascript">
$(function(){
$('#zip').quickselect({
ajax:'http://www.test.com/aaa.action', /* call to url with json formatted array of data */
match:'substring',
autoSelectFirst:false,
mustMatch:true,
additionalFields:[$('#city'), $('#state')],
formatItem:function(data, index, total){return data[0]+", "+data[1]+" "+data[2]}
});
});
</script>
组件在输入变化的时候,会发出ajax请求:
http://www.test.com/aaa.action?q=输入框的值
返回的数据作为下拉提示框的数据源
1.2 返回数据结构
下拉提示框 的数据源格式 使用 json 格式
1.2.1 描述与提交的值一致的
[a,b,c,....]
1.2.1 描述与提交的值不一致的
[{value:'1',label:'中国'},{value:'2',label:'美国'}........]
1.3 对 quickselect的扩展
1.3.1增加对javascript的支持
<script type="text/javascript">
$(function(){
$("#input").quickselect({ maxItemsToShow:10,
finderFunctionStr:'jsfunction',
jsfunction:function(q,callback){
var ognl="daoHelper.queryForList(\"SELECT HOSTNAME label,HOSTNASID VALUE FROM t_cfg_host1_info where HOSTNAME like '%"+q+"%'\")";
//var ognl="service.query("+q+")";
ctx.eval(ognl,callback);
/*
service.query(q,calback);
*/
/*
$.post("demo_ajax_gethint.asp",{suggest:q},callback);
*/
}
});
});
</script>
finderFunctionStr:查询数据源的的方法 值可以是 data(简单数据源),ajax( ajax数据源),jsfunction(对外部javascript支持,此接口比较灵活,可以用于ajax,dwr的扩展)
jsfunction:组件onchange事件时会自动调用的方法
参数:
q :输入框值
callback: jsfunction的回调函数
补充:
ctx.eval(ognl,callback);
service.query(q,calback);
dwr的调用
ctx,service 是dwr中定义的服务 。
eval是ctx的方法
2 源码解读
2.1 组件构成
$input_element :输入框
$result_list :下拉选择提示
$results_mask:遮罩层 ,当输入变化进行查询的时候,等待时出现的层
2.2 组件查询过程解析
当用户输入,监听输入框的keyup事件 ,并与上次的输入的字符进行对比,如果发生变法,则确认为一个change事件
组件监听change事件,通过 finder找出查询数据源的方法,并调用该方法。
方法返回后,数据结构如1.2 所描述,然后更新$result_list 对象,弹出该对象