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

时间：2021-07-08 05:37:47

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

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


Default.aspx.cs页核心代码

<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，内容如下 

<%@ 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;
        }
    }

}








标签：

相关文章