autocomplete自动匹配

 

这几天一直搞开发，

    动态提示：确定肯定是Ajax，想用存Ajax感觉工程浩大。于是想到了jQuery。想到了jQuery插件。废话少说。详细介绍autocomplete.

 

    下载：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/  地址有可能改变。大家baidu 搜索 jquery autocomplete 下载。

    配置：解压缩后吧整个文件夹放入eclipse的项目中。

         导入样式根据自己的实际情况 <link rel="stylesheet" type="text/css" href="jquery-autocomplete/jquery.autocomplete.css " />

         导入库文件，这里也是根据自己的实际情况，注意（在导入库文件之前应该导入jQuery库文件，注意顺序）<script type="text/javascript" src="jquery-autocomplete/jquery-ui-all-min-lastest.js"></script >
    <script type="text/javascript" srcjquery-autocomplete/jquery.autocomplete.min.js"></script >

    使用：既然是动态提示！ 就是输入内容以后触发Ajax到前台匹配。

jsp页面：

<input type="text" id="searchName" name="searchName" />

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=getUserSearchTitleListAjax",  
    {
     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=getUserSearchTitleListAjax",  
    {
     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:<input type="text" id="searchName" name="searchName" size="60" style="border:0;" onclick="getSearch1(this,$('#searchAs').val() )"/>//第一个参数是哪个控件实现，第二个是相当于event后台处理。

 

今天好累！ 格式排版写的不好！ 大家将就的看吧！

QQ：214644119