Jquery插件的使用--AutoComplete

Jquery插件的使用--AutoComplete

Jquery插件是很不错的一种客户体验，今天就来讲讲我使用的AutoComplete插件，首先需要做一些准备工作：这3个文件还是少不了的（可以到Jquery官网去下载）

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.autocomplete.min.js" type="text/javascript"></script>
    <link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />

一、直接使用构造的json数据来实现

然后当然是写js代码了，首先来个稍微简单点的，最后的一个列子讲解如何从数据库中提取数据来实现这个效果（实际上都差不多）

    <script type="text/javascript">
        var data = [
{ name: "Peter", value: "peter@pan.de" },
{ name: "Molly", value: "molly@yahoo.com" },
{ name: "Forneria Marconi", value: "live@japan.jp" },
{ name: "Master <em>Sync</em>", value: "205bw@samsung.com" },
{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
{ name: "Don Corleone", value: "don@vegas.com" },
{ name: "Mc Chick", value: "info@donalds.org" },
{ name: "Donnie Darko", value: "dd@timeshift.info" },
{ name: "Quake The Net", value: "webmaster@quakenet.org" },
{ name: "Dr. Write", value: "write@writable.com" },
{ name: "GG Bond", value: "Bond@qq.com" },
{ name: "Zhuzhu Xia", value: "zhuzhu@qq.com" },
{ name: "liubq", value: "liubenqian@qq.com" }
];

        $(function () {
            $('#keyword').autocomplete(data, {
                max: 12, //列表里的条目数 
                minChars: 0, //自动完成激活之前填入的最小字符 
                width: 400, //提示的宽度，溢出隐藏 
                scrollHeight: 300, //提示的高度，溢出显示滚动条 
                matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示 
                autoFill: false, //自动填充 
                //匹配的项所要发生的事件
                formatItem: function (row, i, max) {//row表示每一行的数据对象，i表示每一行的编号，max表示总的数据行数
                    return row.name + "-->" + " " + row.value;
                }
            }).result(function (event, row, formatted) {
                alert(row.name + form);
            });
        });
  </script>

这个比较简单，因为已经构造了一个json数据了（对json不理解的建议先看下json基础方面的知识）

二、从数据库中提取数据实现自动提示效果

好戏总是在后头，大家关心的还是怎么把数据库中的实际数据也能实现这样的效果对吧，废话不多说

先贴代码：

js代码：

    <script type="text/javascript">

        $(function () {
            $.getJSON("Handler2.ashx", function (data) {
                $('#keyword').autocomplete(data, {
                    max: 12, //列表里的条目数 
                    minChars: 0, //自动完成激活之前填入的最小字符 
                    width: 400, //提示的宽度，溢出隐藏 
                    scrollHeight: 300, //提示的高度，溢出显示滚动条 
                    matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示 
                    autoFill: false, //自动填充 
                    //匹配的项所要发生的事件
                    formatItem: function (row, i, max) {//row表示每一行的数据对象，i表示每一行的编号，max表示总的数据行数
                        //                    return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
                        return row.ProductId + "-->" + " " + row.ProductName;
                    }
                    //            formatMatch: function (row, i, max) {
                    //                return row.ProductId + row.ProductName;
                    //            },
                    //            formatResult: function (row) {
                    //                return row.ProductName;
                    //            }
                }).result(function (event, row, formatted) {
                    alert(row.ProductName + form);
                });
            });
        });

    </script>

注意事项：这里用到了Jquery的getJSON这个方法来获取Handler2.ashx中返回的数据

 

后台代码：

我这里使用的是一般处理文件，通过Jquery中的getJSON这个封装的ajax方法来实现：

一般处理文件：Handler2.ashx

public class Handler2 : IHttpHandler
{
    protected DataTable dt = null;
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        dt = DBHelper.GetDataSet();
        if (dt != null)
        {
            string data = JsonConvert.SerializeObject(dt);
            context.Response.Write(data);
            context.Response.Flush();
            context.Response.End();
        }
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

封装的GetDataTable()方法（用来获取数据）

public class DBHelper
{

    private static string str = ConfigurationManager.ConnectionStrings["ConnectionStr"].ToString();
    public DBHelper()
    {

    }

    public static SqlConnection getConnection()
    {
        SqlConnection conn = new SqlConnection(str);
        return conn;
    }

    public static DataTable GetDataTable()
    {
        DataSet ds = new DataSet();
        using (SqlConnection conn = DBHelper.getConnection())
        {
            string sqlstr = "select * from tb_Product";
            SqlCommand comm = new SqlCommand(sqlstr, conn);
            SqlDataAdapter adapt = new SqlDataAdapter(comm);
            adapt.Fill(ds);
        }
        return ds.Tables[0];
    }
}

下面展示下效果吧：看到没，还不错吧，出现这么多的瓜，体验效果不错吧，这么多瓜更诱人对吧。