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