基于jquery的自动提示单选框

本文介绍基于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 对象，弹出该对象