asp.net -TextBox文本框输入框输入后如百度等搜索引擎的自动提示、自动完成、自动补全功能-jquerys实现

最近在翻新修改.net2.0的的项目，发现原来的service 到了3.5以后被整合到了SVC中去了，而且服务器上运行会显示不出效果，暂时没有头绪，索性换成 jquery ui自带的功能，同样方便，效果一样，而且对页面的资源消耗更小，实现效果如下

实现方法：

1.下载并添加 jquery 库，可以直接右击-另存为下载： jquery-1.9.1.min         jquery-ui.min

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>  

2.添加自定义的css， 也可以用 jquery-ui 自带的

 <style type="text/css">
      .ui-helper-hidden-accessible {
            display: none;
        }

        .ui-autocomplete {
            position: absolute;
            cursor: default;
            border-radius: 3px;
            border: 1px solid #c0c0c0;
            background-color:white;

        }

        .ui-menu {
            list-style: none;
            padding: 0;
            margin: 0;
            display: block;
            outline: none;
            

        }

            .ui-menu .ui-menu-item a {
                text-decoration: none;
                display: block;
                padding: .1em .3em;
                line-height: 1;
                zoom: 0;
                font-size:12px;
                color:black;

            }

           .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
               background: #FFFFAA;
               border: none;
               color: #000;
               border-radius: 0;
               font-weight: normal;
           }
    </style>

3. jquery-ui 规定的语法，web 界面上txtsupplier 会去自动调用 QuerySupplierName.ashx 这个asp.net 的一般处理程序

    </style>
       <script type="text/javascript">
           $(document).ready(function () {
               var availableTags = [
        "ActionScript",
        "KKK"
               ];
               $("#txtSupplier").autocomplete({
                   source: "QuerySupplierName.ashx",//取后台数据库，显示供应商名称
                   minLength: 2

               });
           });
    </script>

4.打开visiual studio，新建一个一般处理程序：QuerySupplierName.ashx

请留意 前端传入的默认requestString 为 term， 后端把dataSet的字段添加为相同的两列，改成键值对的格式，必须为 label 和 value  这样的字段名称， 转换为 JSON格式输出。因为jqueryUI 取json格式比较好。保存运行就可以看到最上图的效果了

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

using System;
using System.Web;
using System.Data;
using UserControlLibrary.Lamsoon;
using System.Collections.Generic;
using System.Web.Script.Serialization;

public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        if (context.Request.QueryString["term"] != null)
        {
            string key = context.Request.QueryString["term"];
            context.Response.Write(GetKeyValues(key));
        }
    }
    public static string GetKeyValues(string key)
    {
        SqlHelper.AddParameter("@keyword", key);
        DataSet ds = SqlHelper.ExecuteDataset("stp_autofill", SqlHelper.GetParameters());
        DataTable dt = ds.Tables[0];
        string jsonString = "";
        if (dt.Rows.Count > 0)
        {
            dt.Columns[0].ColumnName = "label";

            dt.Columns.Add(new DataColumn("value", typeof(string))); 
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                dt.Rows[i]["value"] = dt.Rows[i]["label"].ToString(); 
            }
            jsonString = DataTableToJSON(dt);
        }
        return jsonString;
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

    private static string DataTableToJSON(DataTable table)
    {
        List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
        foreach (DataRow row in table.Rows)
        {
            Dictionary<string, object> dict = new Dictionary<string, object>();
            foreach (DataColumn col in table.Columns)
            {
                dict[col.ColumnName] = row[col];
            }
            list.Add(dict);
        }
        JavaScriptSerializer jss = new JavaScriptSerializer();
        return jss.Serialize(list);


    }


}

此处是asp.net自带的wcf的方法：

asp.net -TextBox文本框输入框输入后如百度等搜索引擎的自动提示、自动完成、自动补全功能-wcf服务实现