jQuery:SP.NET Autocomplete Textbox Using jQuery, JSON and AJAX

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQueryAutocomplete.aspx.cs" Inherits="VipWinValidation.jQueryAutocomplete" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>编辑管理员</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
 <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<% =txtCountry.ClientID%>").autocomplete({
  source: function( request, response ) {
     $.ajax({
       url: "LoadCountry.ashx",
       type: "POST",
       dataType: "json",
       data: {term: request.term},
       success: function(data) {
         response(data);
      }
     });
   }
 });
  });
</script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
             Country :
        <asp:TextBox ID="txtCountry" runat="server">
        </asp:TextBox>
    </div>
    </form>
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/// <summary>
    /// $codebehindclassname$ 的摘要说明
    ///
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class LoadCountry : IHttpHandler
    {
        /// <summary>
        ///
        /// </summary>
        /// <param name="context"></param>
        public void ProcessRequest(HttpContext context)
        {
            HttpRequest request = context.Request;
            HttpResponse response = context.Response;
 
            System.Collections.Specialized.NameValueCollection forms = context.Request.Form;
            string strOperation = forms.Get("term"); //
            List<string> li = Country(strOperation);
            JavaScriptSerializer JS = new JavaScriptSerializer();
            string sf = JS.Serialize(li);
            context.Response.Write(sf);
        }
        /// <summary>
        ///
        /// </summary>
        /// <param name="input"></param>
        /// <returns></returns>
        private List<string> Country(string input)
        {
            //Get the countries list from database, for this example I am creating sample output
            //return GetCountriesfromDB(input);
            List<string> li = new List<string>();
            foreach (string s in GetCountries())
            {
                string st = s.ToLower();
                if (st.Contains(input.ToLower()))
                {
                    li.Add(s);
                }
            }
            //Linq
            //return GetCountries().FindAll(item => item.ToLower().Contains(input.ToLower()));
            return li;
 
        }
        /// <summary>
        ///
        /// </summary>
        /// <returns></returns>
        private List<string> GetCountries()
        {
            List<string> CountryInformation = new List<string>();
            CountryInformation.Add("India");
            CountryInformation.Add("United States");
            CountryInformation.Add("United Kingdom");
            CountryInformation.Add("Canada");
            CountryInformation.Add("South Korea");
            CountryInformation.Add("France");
            CountryInformation.Add("Mexico");
            CountryInformation.Add("Russia");
            CountryInformation.Add("Australia");
            CountryInformation.Add("Turkey");
            CountryInformation.Add("Kenya");
            CountryInformation.Add("New Zealand");
            CountryInformation.Add("涂聚文");
            CountryInformation.Add("涂年生");
            CountryInformation.Add("江西省");
            CountryInformation.Add("江苏省");
            CountryInformation.Add("浙江省");
            return CountryInformation;
        }
        /// <summary>
        ///
        /// </summary>
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

　　.net 4.0

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQueryAutocomplete.aspx.cs" Inherits="DuCms.Web.jQueryAutocomplete" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>编辑管理员</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
 <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $("#<% =txtCountry.ClientID%>").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "jQueryAutocomplete.aspx/LoadCountry",
                    data: "{input:'" + request.term + "'}",
                    dataType: "json",
                    success: function (output) {
                        response(output.d);
                    },
                    error: function (errormsg) {
                        alert(errormsg.responseText);
                    }
                });
            }
        });
    });
</script>  
</head>
<body>
    <form id="form1" runat="server">
    <div>
             Country :
        <asp:TextBox ID="txtCountry" runat="server">
        </asp:TextBox>
    </div>
    </form>
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
 
namespace DuCms.Web
{
 
    /// <summary>
    ///
    /// </summary>
    public partial class jQueryAutocomplete : System.Web.UI.Page
    {
 
        /// <summary>
        ///
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
        [WebMethod]
        public static List<string> LoadCountry(string input)
        {
            List<string> li = new List<string>();
            //Get the countries list from database, for this example I am creating sample output
            //return GetCountriesfromDB(input);
            li = GetCountries().FindAll(item => item.ToLower().Contains(input.ToLower()));
            return li;
 
        }
        /// <summary>
        ///
        /// </summary>
        /// <returns></returns>
        public static List<string> GetCountries()
        {
            List<string> CountryInformation = new List<string>();
            CountryInformation.Add("India");
            CountryInformation.Add("United States");
            CountryInformation.Add("United Kingdom");
            CountryInformation.Add("Canada");
            CountryInformation.Add("South Korea");
            CountryInformation.Add("France");
            CountryInformation.Add("Mexico");
            CountryInformation.Add("Russia");
            CountryInformation.Add("Australia");
            CountryInformation.Add("Turkey");
            CountryInformation.Add("Kenya");
            CountryInformation.Add("New Zealand");
            CountryInformation.Add("涂聚文");
            CountryInformation.Add("涂年生");
            CountryInformation.Add("江西省");
            CountryInformation.Add("江苏省");
            CountryInformation.Add("浙江省");
            return CountryInformation;
        }
    }
}

　　

posted @   ®Geovin Du Dream Park™  阅读(212)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示