JQUERY 的autocomplete UI自动完成控件的运用以及ajax的使用

  离开微软已经有半年多了，现在开始又开始接触Jquery和ajax技术，想起在微软的三年里大多安全编程(DACL,SACL)以及MP3截取 ，字符数组以及字节流的 转换，又或者是WPF的多线程管理的开发，总结下来三年的工作以前两年的技术为主，到后来的出Monthly report以及Windows Dev组的管理为主。从无锡微软会回上海携程，担任的是高级软件工程师的职位，感觉每天都是零碎的需求，总算这次有个关于赔垫付款直连项目，让我这边要弄一个银行总行和银行支行的自动模糊查询，刚开始想想很简单，可是我们的项目是非MVC的，借鉴了网上一些过来人的文章：

http://www.cnblogs.com/hyl8218/archive/2010/03/19/1688828.html

http://www.cnblogs.com/zgaspnet/archive/2012/05/28/2521323.html

http://www.zjgsq.com/1237.html

http://www.cnblogs.com/seasons1987/archive/2013/07/22/3205797.html

http://www.cnblogs.com/your568/archive/2012/08/15/2639664.html

http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/2534690.html

 

  最后我选择了用ashx来做Web Handle的路由，我曾经在9you那会用MVC 1.0的当时的control层在做这个jquery的异步查询和联动非常方便，但是这个项目2008就有了，不得已还是用这个：

 

    var selectvalue;   

     function findValue(li) {
         if (li == null) return alert("No match!");
         if (!!li.extra)
             var sValue = li.extra[0];

     }
     function selectItem(li) {
         findValue(li);
     }
     function lookupLocal() {
         var oSuggest = $(".ajaxinput")[0].autocompleter;
         oSuggest.findValue();
         return false;
     }
     function selectChange() {
        
         selectvalue = document.getElementById("<%=ddlBankName.ClientID%>").value;
         
     }


     $(document).ready(function () {


         $("#<%=txbBankName.ClientID%>").autocomplete("../Ajax/AutoCompleteData.ashx", {
             delay: 10,
             minChars: 1,
             matchSubset: 1,
             cacheLength: 1,

             onItemSelect: selectItem,
             onFindValue: findValue,
             autoFill: true,
             maxItemsToShow: 20,
             extraParams: { a: selectvalue }
         }).result(function(event, row, formatted) {
                  
               });

                           });

 

   而ashx文件的内容如下：

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

using System;
using System.Web;
using System.Data.OleDb;
using System.Data;
using System.Text;
using Ctrip.Business.AccCashingBusiness.ComplRefund;
public class AutoCompleteData : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
      context.Response.ContentType = "text/plain";

      string key = System.Web.HttpUtility.UrlDecode(context.Request["q"], UTF8Encoding.UTF8);
      string key2 = System.Web.HttpUtility.UrlDecode(context.Request["a"], UTF8Encoding.UTF8);
        
        if (key != null && key.Trim() != "")
        {
           DataTable dt = ComplRefundBL.GetBankCode(key.ToString().Trim(), key2.ToString().Trim());
            StringBuilder sb = new StringBuilder();
            if (dt != null && dt.Rows.Count > 0)
            {
                for (int i=0; i < dt.Rows.Count; i++)

                    sb.Append(dt.Rows[i]["name"].ToString() + "\n"); 
            }
            if (sb != null && sb.ToString().Trim() != "")
            {
                context.Response.Write(sb.ToString());
                context.Response.End();
            }
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

  只要在开头加上jquery的必要的库，jquery-1.2.6.min.js，jquery.autocomplete.js以及jquery.autocomplete.css，由于在输入自动模糊的银行分行信息的同时有乱码现象，因为这个版本比较低，所以我在jquery.autocomplete.js里去掉encodeURI的同时在 string key = System.Web.HttpUtility.UrlDecode(context.Request["q"], UTF8Encoding.UTF8)，在这里和其他的版本修改方式不一样，发觉任何编程语言都爱卡在字符集的转换上，刚理论外尝试是很重要，最后这个result的结果有些小issue。为了解决这个issue我另外只能在新增一个ajax去通过银行分行名来得到银行编号，因为毕竟这个后台是需要这个字段的。

 

   function jumpBankcode()
  {
 
                         var a=$("#<%=txbBankName.ClientID%>").val();
                         $.ajax({
                             type: "post",
                             url: "../Ajax/change.ashx?" + a,

                             datatype: "text",
                             contentType: "application/json",
                             success: function (data) {
                                 $("#<%=txtBankCode.ClientID%>").val(data);
                             }
                         });
           }

  这个是在OnBlur的文本框失去焦点来执行的，data节点有些小问题，只能放在url后面了，下面是这个的ashx文件：

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

using System;
using System.Web;
using System.Data.OleDb;
using System.Data;
using System.Text;
using Ctrip.Business.AccCashingBusiness.ComplRefund;

    public class  change : IHttpHandler
    {
        /// <summary>
        /// You will need to configure this handler in the web.config file of your 
        /// web and register it with IIS before being able to use it. For more information
        /// see the following link: http://go.microsoft.com/?linkid=8101007
        /// </summary>
        #region IHttpHandler Members

        public bool IsReusable
        {
            // Return false in case your Managed Handler cannot be reused for another request.
            // Usually this would be false in case you have some state information preserved per request.
            get { return true; } 
        }

        public void ProcessRequest(HttpContext context)
        {
            //write your handler implementation here.
            string username = context.Request.QueryString[0];
            if (username != null && username.Trim() != "")
            {
                //string connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + AppDomain.CurrentDomain.BaseDirectory + "App_Data/data.mdb";
                //key = key.Replace("'", "\"");
                //OleDbConnection conn = new OleDbConnection(connstr);
                //OleDbCommand comm = conn.CreateCommand();
                //string sql = "select top 10 name from table1 where name like '" + key.ToString().Trim() + "%' order by id desc";
                ////context.Response.Write(sql);
                //comm.CommandText = sql;
                //conn.Open();
                DataTable dt = ComplRefundBL.GetBankCode(username.ToString().Trim());
                StringBuilder sb = new StringBuilder();
                if (dt != null && dt.Rows.Count > 0)
                {
                    for (int i = 0; i < dt.Rows.Count; i++)

                        sb.Append(dt.Rows[i]["code"].ToString());
                }

                if (sb != null && sb.ToString().Trim() != "")
                {
                    context.Response.Write(sb.ToString());
                    context.Response.End();
                }
            }
            
            

           
        }