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

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

　　

posted @ 2018-02-02 15:07  ®Geovin Du Dream Park™  阅读(205)  评论(0)  编辑  收藏  举报