autocomplete自动匹配

autocomplete自动匹配
2011年08月01日
　　这几天一直搞开发，
　　动态提示：确定肯定是Ajax，想用存Ajax感觉工程浩大。于是想到了jQuery。想到了jQuery插件。废话少说。详细介绍autocomplete.
　　下载：http://bassistance.de/jquery-plugins/jquery-plugin -autocomplete/ 地址有可能改变。大家baidu 搜索 jquery autocomplete 下载。
　　配置：解压缩后吧整个文件夹放入eclipse的项目中。
　　导入样式根据自己的实际情况 
　　导入库文件，这里也是根据自己的实际情况，注意（在导入库文件之前应该导入jQuery库文件，注意顺序）
　　
　　使用：既然是动态提示！ 就是输入内容以后触发Ajax到前台匹配。
　　jsp页面：
　　
　　js：var cityList;
　　var options = {
　　minChars: 1,//从第几个开始匹配
　　max: 10,//显示匹配的个数
　　width: 448,//宽度
　　matchContains: true,//支持中文匹配
　　formatItem: function(row, rowNum, rowCount, searchItem)//匹配条显示的格式化
　　{
　　if(row.hospitalname==undefined)
　　{
　　return row.text ;
　　}
　　else
　　return row.text+"-"+row.hospitalname+"-"+row.officename ;
　　},
　　formatMatch: function(row, rowNum, rowCount)//按照什么匹配
　　{
　　return row.userid + " " + row.text;
　　},
　　formatResult: function(row, rowNum, rowCount)//格式化结果
　　{
　　return row.text;
　　}
　　};
　　$(function()
　　{
　　$("#searchname").bind("click",getSearch);
　　});
　　function getSearch(event)//当点击时候执行函数
　　{
　　$.getJSON("/YHTWeb/userSearch.do?method=getUserSea rchTitleListAjax", 
　　{
　　searchName:$("#searchname").val(),//配置参数
　　d:new Date()//防止缓存
　　},
　　function(data){//回调函数
　　var cityList = data.beans;//我在后台自己组织的json数据data.beans返回的是一个jsonArray。
　　$('div[class="ac_results"]').remove();//防止多次添加！每次先清空div。通过firefox 可能看到
　　$("#searchname").autocomplete(cityList, options);//自动匹配
　　$("#searchname").result(function(event, row, formatted)//选择匹配项执行函数
　　{
　　$("#textuserid").val(row.userid);//这里说明吧id保存一个hidden中。
　　});
　　}
　　)
　　}
　　通过这几步就可能实现了！ 大家可以看看效果。注意后台组织数据！ json。相信大家肯定成功。
　　相信大家实现了以后肯定有这样的疑问，匹配一个文本框就要写一个！这样通用性不强！下面写一下可以匹配多个的！做到jQuery 的宗旨，write less do more。
　　js:
　　function getSearch1(docName,searchAsName)
　　{
　　$(function(){
　　var searchname="#"+docName.id;
　　var searchas=searchAsName;
　　var cityList;
　　var options = {
　　minChars: 1,
　　max: 10,
　　width: 448,
　　matchContains: true,
　　formatItem: function(row, rowNum, rowCount, searchItem)
　　{
　　if(row.hospitalname==undefined)
　　{
　　return row.text ;
　　}
　　else
　　return row.text+"-"+row.hospitalname+"-"+row.officename ;
　　},
　　formatMatch: function(row, rowNum, rowCount)
　　{
　　return row.userid + " " + row.text;
　　},
　　formatResult: function(row, rowNum, rowCount)
　　{
　　return row.text;
　　}
　　};
　　$(function()
　　{
　　$(searchname).bind("click",getSearch);
　　});
　　function getSearch(event)
　　{
　　$.getJSON("/YHTWeb/userSearch.do?method=getUserSea rchTitleListAjax", 
　　{
　　searchAs:searchas,
　　searchName:$(searchname).val(),
　　d:new Date()
　　},
　　function(data){
　　var cityList = data.beans;
　　$('div[class="ac_results"]').remove();
　　$(searchname).autocomplete(cityList, options);
　　$(searchname).result(function(event, row, formatted)
　　{
　　$("#textuserid").val(row.userid);
　　});
　　}
　　)
　　}
　　})
　　}
　　jsp://第一个参数是哪个控件实现，第二个是相当于event后台处理。
　　今天好累！ 格式排版写的不好！ 大家将就的看吧！
　　QQ：214644119