.net 使用jQuery Autocomplete(自动完成)插件结合ajax

想做一个搜索时自动补全功能，在网上搜了几个方法，发现国内的方法都是一错全错，可能copy过多吧，最后还是使用了一个国外的jquerry autocomplete的演示例子完成了

做模仿的效果如下：

下面演示一个简单jquery autocomplete方法:

先导入两个开发包：

<script src="JQ/jquery-1.7.min.js" type="text/javascript"></script>
<script src="JQ/jquery.autocomplete.js" type="text/javascript"></script>

还有一个css样式

<link href="style/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />

js  code:

<script type="text/javascript">

var websites = [
 "Google","NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent", 
 "Taobao", "Tom", "tahoo", "tavaEye", "tsdn", "Alipay"
];
$().ready(function() {
 $("#usercode").autocompleteArray(websites); 
});
</script>
 

html code:

<td width="60">用户名:</td>
<td><input type="text" id="usercode" runat="server" class="text-medium" /></td>

简单数组型的，使用起来非常方便，效果如下：

看到一些站的用数组的时候都是直接用的autocomplete，但其实并不能实现，直接用数组必须得用autocompletearray

 

ajax 动态检索数据库现实 autocomplete

js code:

<script language="javascript" type="text/javascript">
 $(document).ready(function () 
     { 
       $('#usercode').autocomplete('Ajax/SearchAdminCode.ashx', { 
                 minChars: 0,//minChars表示在自动完成激活之前填入的最小字符，这里我们设置为0
                 max: 5, //max表示列表里的条目数，我们设置了5，所以显示5条
                 mustMatch: false,//mustMatch表示必须匹配条目，也就是在文本框里输入的内容，必须是data参数里的数据，如果不匹配，文本框就被清空
                 matchContains: true,//表示包含匹配，也就是只要data数据里面有关键字就显示，不管它在什么位置，比如：google,omg;如果输入o,两个都显示
                 scrollHeight: 220, //定高
                 
                 formatItem: function (data, i, total) { 
                                 return '<I>'+data[0]+'</I>'; 
                 },  
                 formatMatch: function (data, i, total) { 
                                 return data[0]; 
                 },  
                 formatResult: function (data) {   
                                return data[0];
                 }        
          
               });
               
               
        $('#username').autocomplete('Ajax/SearchAdminName.ashx', { 
                 minChars: 0,
                 max: 5, 
                 mustMatch: false,
                 matchContains: true,
                 scrollHeight: 220, 
                 
                 formatItem: function (data, i, total) { 
                                 return '<I>'+data[0]+'</I>'; 
                 },  
                 formatMatch: function (data, i, total) { 
                                 return data[0]; 
                 },  
                 formatResult: function (data) {   
                                return data[0];
                 }        
          
               });
               
       });
           
</script>

后面3个参数formatItem、formatMatch、formatResult非常有用，formatItem作用在于可以格式化列表中的条目，比如我们加了“I”，让列表里的字显示出了斜体，formatMatch是配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据，formatResult是定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据。

 

这边写了两个校验，其实效果都一样，就显示一个看一下：

SearchAdminCode.ashx

<%@ WebHandler Language="C#" Class="SearchAdminCode" %>

using System;
using System.Web;
using System.Collections.Generic;

public class SearchAdminCode : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";

        string admincode = context.Request.QueryString["q"].ToString();

        Admin_Info ai = new Admin_Info();
        ai.Admin_code = admincode;

        List<Admin_Info> list = DLL.Admin_infoManager.GetAdminsBy(ai,null) as List<Admin_Info>;
        foreach (Admin_Info item in list)
        {
            context.Response.Write(item.Admin_code+"\n");
        }
        
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

 

展示效果如下：

 

如果上面看得还不是很明白，可以直接去http://www.pengoworks.com/workshop/jquery/autocomplete.htm

这就原始demo,上面都有相应的需要下载的文件；说明什么的都很全，虽然是个简陋的外国站，但是都是比较简单的英文，看起来很轻松。