jQuery自动完成的插件（AutoComplete)

 

      项目中要用到ajax的自动完成功能，又不想用ajax.net中的自动完成功能。干脆基于jquery自己做一个js来实现。做完后感觉还不错，就想把它直接做成jquery的插件算了，正在查怎么做jquery插件的时候，在jquery官网上发现原来已经有了自动完成插件    (︸_︸)，算了还是做出来吧。

      做出来后感觉还不错，最起码比官方的要小一些，而且还没有官方的缺点（官方插件用鼠标选择后，再用键盘选择会有问题），还加上了自己需要的一些功能。

下载地点: http://plugins.jquery.com/project/jq-autocomplete

      下面介绍一下自己的成果，就是两个文件，jquery.AutoComplete.js和AutoComplete.css。先说AutoComplete.css，里面就是三个样式。

.floor
{
     visibility: hidden;
     position: absolute;
     background-color:white;
     border: 1px solid;
     overflow: auto;
}
.unselected
{
     background-color: white;
}
.selected
{
     background-color: dodgerblue;
     color: white;
}

 

       所有功能都是用div实现的，.floor是下拉列表的底板的样式，.unselected和.selected是未选中和选中时的样式。样式的名称不能改，还有.floor里面visibility: hidden;和position: absolute;这两个是不能改的，其他都可以自己来定义。

       再说jquery.AutoComplete.js的用法，先要在页面里引用上面的css文件，jquery-latest.pack.js（jquery文件）和jquery.AutoComplete.js文件（都是废话），然后在页面里加上下面的代码。

    <script language="javascript" type="text/javascript">
         $(function(){
             $("input").AutoComplete(request,options);
         });
    </script>

说明一下参数

request: 必需，ajax请求的地址，只要能返回一个字符串就可以。

option: 可选，用这个形式“{seperator:"；",autoTab:true,parameterName:"key",kwlength:2}”

详细说明一下:

seperator ：表示分隔符，默认为逗号,上面表示用分号，就是说rquest要输出一个类似“a;b;c;d”的字符串。

autoTab ：表示是否按回车后自动跳转到下一个文本框,true为自动跳转。

parameterName: 回传时的参数名,如果request为data.asp，parameterName为key的话，ajax的请求为data.asp?key=***的形式，如果省略的话，就使用文本框的name属性；如果文本框name属性也没有的话，就使用文本框的id属性。（如果连id也没有的话，这个插件就不能用了）

kwlength ：关键字最小长度，默认值为3，表示文本框内文本的长度最小为3时，才做ajax请求。

下面给一个完整的例子

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > AutoComplete </ title >
     < link href ="AutoComplete.css" type ="text/css" rel ="stylesheet" >

     < script language ="javascript" type ="text/javascript" src ="js/jquery-latest.js" ></ script >

     < script language ="javascript" type ="text/javascript" src ="js/jquery.AutoComplete.js" ></ script >

     < script language ="javascript" type ="text/javascript" >
         $(function(){
             $("input").AutoComplete("data.asp",{seperator:";",autoTab:true,parameterName:"key",kwlength:2});
         });
     </ script >

</ head >
< body >
     < input type ="text" id ="test" />
     < input type ="text" id ="Text3" />
     < table >
         < tr >
             < td >
                 < input id ="Text1" type ="text" name ="key" /></ td >
         </ tr >
         < tr >
             < td >
                 < input id ="Text2" type ="text" name ="key" /></ td >
         </ tr >
     </ table >
</ body >
</ html >

Data.asp 代码：

< %

if len (request.querystring( " key " )) > 0 then
     datas = ""
     for i = 0 to 10
         datas = datas & request.querystring( " key " ) & i & " ; "
     next
     response.write(datas)
end if

% >

 

Data.asp很简单，就是用传的参数值生成一个字符串，用分号分割；效果看下面的图

具体例子可以到 http://bbs.jquery.org.cn/viewthread.php?tid=192&extra=page%3D1下载，直接放到IIS的虚拟目录下，用IE6、IE7和FF下测试都没有问题。

有什么错误的话请大家及时告诉我，可以直接留言或发Email:luq885@gmail.com

实际使用中还是发现了一些问题，做了一些修改，样式表里.floor里面visibility: hidden;可以不用了，增加了一个.net服务器端的例子，下载地址在http://www1.51ok.com/down.do?7A5EFE8D0FD43CDF8FE1336336A5A569，可以直接下载了。