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服务实现

 

作者: 轻烟随风
当前文章地址: https://www.zyxpp.com/textboxautoindicatejqueryui/
来源: 轻烟随风的博客
文章版权归作者所有,欢迎转载
THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭