autocomplete 自动完成控件使用 简记

一、需要准备的文件：
jquery.js
neverModules-autoComplete.js
autocomplete.css
animated_loading.gif

二、页面：
1、引入文件：

<link rel="stylesheet" href="/page/autocomplete.css" type="text/css">
<script type="text/javascript" src="/page/neverModules-autoComplete.js"></script>
<script type="text/javascript" src="/page/jquery.js"></script>

2、需要自动补全的文本框:

<input id="operatorName" type="text" name="operatorName"  						style="width:60%;" class="textfield_readselect" onkeyup="goodsAutoComplete.hdleEvent(event);" ondblclick="goodsAutoComplete.expandAllItem();" 
						onmouseover="goodsAutoComplete.showAnimateImage();" onmouseout="goodsAutoComplete.closeAnimateImage();">

貌似当全页面只有一个文本框时，自动补全的时候，敲回车键，会弹出到新连接页面，再加个吧:<input id="aaaxxxx" type="text" name="sd2xxxx" style="display: none">

3、js函数：

//人员列表键值对，把人员的姓名作为key，把对应的序号作为value，在后面拿来验证用户是否输入一个不存在的人员进行提交。
var keyValues = [];							var goodsCompleteDataSource= [
	       {'text':'','hints':'','content':'','hiddenText':''
	       }];
	       
	     var goodsAutoComplete = null;
	       
	       onload = function pageLoadHdle(){
	        var goodsConfiguration = {
	          instanceName: "goodsAutoComplete",
	          textbox: document.all("operatorName"),
	          dataSource:goodsCompleteDataSource
	        };
	        goodsAutoComplete = new neverModules.modules.autocomplete(goodsConfiguration);
	        goodsAutoComplete.callback = function (autocompleteValue, autocompleteContent) {
	          document.getElementById("operatorName").value=autocompleteValue;	
	        }
	        goodsAutoComplete.useContent = true;
			goodsAutoComplete.useSpaceMatch = true;
			goodsAutoComplete.ignoreWhere = true;
	        goodsAutoComplete.create();
	        //goodsAutoComplete.expandAllItem();
	        goodsAutoComplete.showAnimateImage("/hx_choose_person/page/animated_loading.gif");
	        window.setTimeout(
	          function closeAnimateImageAfter1seconds() { //设置图片消失时间为1秒 
	            goodsAutoComplete.closeAnimateImage();
	          }, 1000
	        );
	        onLoadGoods();
	      }
      
    function onLoadGoods(){   //加载人员列表
			 $.ajax({
		     type: "POST",
		     dataType:"json",
		     data:{id:$("#id_array").val(),type:$("#type_array").val()},
        	 cache: false,
		     async:false,
		     url: "/后台servlet路径",
		     success: function(data){
									    for(var property in data){
						                   var bean = data[property];
			//此处将该数组填充值			                   keyValues[bean.text] = bean.content;
						                   goodsCompleteDataSource[property]=bean;
           								 }
		     }									   
			});
	}

4、后台servlet查询拼凑字符串方法：

String id = request.getParameter("id");
String type = request.getParameter("type");

List personList = DbUtil.getUserInfoList(id,type);
StringBuffer sbf = new StringBuffer();
sbf.append("[");
for(int i=0; i<personList.size(); i++) {
	PersonInfo person = (PersonInfo)personList.get(i);
	StringBuffer temp = new StringBuffer();
	temp.append("{text:");
	temp.append("'"+person.getOperatorName()+"'");
	temp.append(",");
	temp.append("hints:''");
	temp.append(",");
	temp.append("content:"+person.getOperatorID());
	temp.append(",");
	temp.append("hiddenText:'"+person.getOperatorName()+"'}");
	sbf.append(temp);
	if(i<personList.size()-1) {
		sbf.append(",");
	}
}
sbf.append("]");
//response.setContentType("text/xml;charset=utf-8");
//response.getWriter().print("[{text:'xzcz',hints:'',content:'22',hiddenText:'xzcz'},{text:'sa',hints:'',content:'22',hiddenText:'sa'}]");
response.getWriter().print(sbf.toString());

5、为了防止用户输入不存在的人员并提交，在提交前验证一下：

function dosubmit(){
var inputvalue = $("#operatorName").val();
if(typeof(inputvalue) != "undefined") {			 	if(typeof(keyValues[inputvalue]) == "undefined") {				alert('你指定的人员不存在,请重新选择!');
			    	return;
			    }
		    }
......
}