在asp.net工程中使用jQuery-ui的autocomplete功能

本文主要是介绍在asp.net工程中使用jQuery-ui的autocomplete功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

整理技术核心在于前端html请求调用Handler.ashx页面查询json结果返回给前端页

几乎大部分交互都是基于jQuery在前端完成，而自动完成（autocomplete）的结果需要服务器进行查询，因此在html请求的过程中进行数据交互处理才能实现这个效果

Default.aspx.cs页核心代码

[csharp]  view plain copy  
 <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
     <script type="text/javascript" src="js/jquery.js"></script>  
     <link type="text/css" rel="stylesheet" href="css/jquery-ui.css" />  
     <script type="text/javascript" src="js/jquery-ui.js"></script>  
     <script type="text/javascript">  
         $(function () {  
             $("#txtSearch").autocomplete({  
                 minLength: 1,   // 设置搜索的关键字最小长度  
                 max: 10,        // 下拉项目的个数  
                 source: function (request, response) {// 设置自动完成列表的函数,函数包括两个参数,requset 和 response  
                     $.ajax({  
                         type: "POST", // 通过 request.term 可以获得文本框内容  
                         url: "Handler.ashx?keyword=" + request.term, // 使用 Handler.ashx?keyword= 传参  
                         contentType: "application/json; charset=gb2312",  
                         dataType: "json",  
                         success: function (data) {  
                             // jQuery.map(array, callback) :将一个数组中的元素转换到另一个数组中。  
                             // 下面就是把数组["value1", "value2",...]转换为[{value:"value1"}, {value:"value2"},...]  
                             response($.map(data, function (item) {  
                                 return { value: item };  
                             }));  
                         },  
                         /* 
                         error: function () { 
                             alert("ajax请求失败"); 
                         } 
                         */  
                     });  
                 }  
             });  
         });  
     </script>  
 </head>  
 <body style="overflow:hidden;">  
     <input id="txtSearch" type="text" class="input.search-query" runat="server" placeholder="请输入井号">  
 </body>  
 </html>  

后端不需要写，单独新建一个文件Handler.ashx，内容如下

[csharp]  view plain copy  
 <%@ WebHandler Language="C#" Class="Handler" %>  
 using System;  
 using System.Web;  
 using System.Collections.Generic;// List  
 using System.Web.Script.Serialization;// JavaScriptSerializer  
 using System.Configuration;// ConfigurationManager  
 using Oracle.DataAccess.Client;// OracleConnection,OracleCommand,OracleDataReader  
   
 // Handler 容器,处理 HTTP 请求  
 public class Handler : IHttpHandler  
 {  
     /// <summary>      
     /// 根据关键字过滤内容    
     /// </summary>      
     /// <param name="keyword">关键字</param>     
     /// <returns>过滤数组</returns>      
     private string[] GetFilteredList(string keyword)  
     {  
         List<string> resultList = new List<string>();  
         OracleConnection conn = new OracleConnection(ConfigurationManager.ConnectionStrings["填写要查询的数据库串"].ConnectionString);  
         OracleCommand cmd = conn.CreateCommand();  
         conn.Open();// 打开连接  
         cmd.InitialLONGFetchSize = -1;// 设定为抓取不限长度的Long字段  
         OracleDataReader dr;  
         cmd.CommandText = "填写要查询的sql语句注意结果必须为单列";  
         dr = cmd.ExecuteReader();  
         while (dr.Read())  
         {  
             resultList.Add(dr[0].ToString());// 每次读取后数据前推,因此只需读首行即可  
         }  
         dr.Close();// 关闭读取器  
         conn.Close();// 关闭连接  
         // 过滤关键字  
         int maxlist = 10;// 下拉列最大显示数  
         List<string> filteredList = new List<string>();  
         foreach (string sResult in resultList)  
         {  
             // 判断是否包含关键字，然后加入到过滤后的集合中。     
             if (sResult.Contains(keyword.ToUpper()) && maxlist != 0)  
             {  
                 filteredList.Add(sResult);  
                 maxlist--;  
             }  
         }  
         // 返回数组，以便后面能序列化为JSON格式数据       
         return filteredList.ToArray();  
     }  
   
     // 页面保留方法勿删,用于实际处理接口请求  
     public void ProcessRequest(HttpContext context)  
     {  
         string keyword = context.Request.QueryString["keyword"];// 获取参数字符串  
         if (keyword != null)  
         {  
             JavaScriptSerializer serializer = new JavaScriptSerializer();  
             // 通过 JavaScriptSerializer 对象的 Serialize 序列化为["value1","value2",...]的字符串      
             string jsonString = serializer.Serialize(GetFilteredList(keyword));  
             context.Response.Write(jsonString); // 返回客户端json格式数据         
         }  
     }  
   
     // 页面保留属性勿删,用于获取当前IHttpHandler实例是否可用  
     public bool IsReusable  
     {  
         get  
         {  
             return false;  
         }  
     }  
   
 }  