欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-10 08:05:27
.net 4.0 ......
<%@ 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>

  

/// <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

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

  

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