autocomplete 自动完成控件使用 简记

yuaoi

一、需要准备的文件：
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();"  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;    }    }......}