jquery 数组的 map 工具:
jquery中有些针对数组的工具,大家仔细研究一下,其中一些都是非常好用的:举例来说,$.map(array,callback) 这个就很有用,比如说有个json数据是
var jsontest=[{"id":"132","name":"test01"},{"id":"133","name":"test02"},{"id":"134","name":"test03"}];
而此时,需要用 jquery-ui 实现一个自动输入提示的功能,如下:
$("#inputTest").autocomplete({
source: availableTags
});
此处availableTags必须是一个字符串构成的数组,或者是{"label":"Label01","value":"Value01"}这样的对象构成的数组。
那么,上面所定义的jsontest数组就无法直接用在这里,假设我们希望用它的name来做为自动输入提示的数据来源的话,则需要构造一个新的仅有name值的数组,笨办法当然是通过循环,用jsontest里的数据重新构造一个新的数组,这里我们可以用$.map(array,callback) 来巧妙地生成我们想要的数组:
var jsonresult=$.map(jsontest,function(item){
return item.name;
});
或
var jsonresult=$.map(jsontest,function(item){
return {"label":item.name,"value":item.id};
});
在使用jquery-ui的autocomplete 功能(或其他控件功能)时,其中都有Events这部分说明文档,初用者可能不太注意,此部分使用好后将是非常犀利地,嘿嘿……
接上面代码:
$("#inputTest").autocomplete({
source: jsonresult
});
此时,有两个input,一个隐藏,一个显示,显示的有提示,始终用label的值,而隐藏域则随着变化而变化为value的值。
<input id="inputTest" type="text" /><input id="hiddenTest" type="hidden" />
这时如果仅使用上面的脚本,显示的提示是name里的字串,但一旦选择了之后,inputTest里面会填入value里的数字,同时隐藏域并不能变化。
我们可以这样实现:
$("#inputTest").autocomplete({
source: jsonresult,
select:function(event, ui) {
$("#hiddenTest").val(ui.item.value);
$(event.target).val(ui.item.label);
event.preventDefault();
}
});
此处$(event.target)也可以写成$("#inputTest")或$(this)吧,需要说明的是event表示的好象就是事件对象,target属性是指input元素,而ui.item则是数组的一个数据对象如:{"id":"132","name":"test01"},具体ui是个什么,我也说不上,呵呵……