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;

        }

    }

}

jQuery:SP.NET Autocomplete Textbox Using jQuery, JSON and AJAX的更多相关文章

【jQuery】jquery-ui autocomplete智能提示
jQuery UI,简而言之,它是一个基于jQuery的前端UI框架.我们可以使用jQuery + jQuery UI非常简单方便地制作出界面美观.功能强大.跨浏览器兼容的前端html界面. Auto ...
jQuery Validate 插件验证,,返回不同信息(json remote)自定义
问题申请账号需要确认该账号是存在 jquery.validate.js中的remote Jquery Ajax获取后台返回的Json数据后,添加自定义校验解题思路:输入的登陆信息远程验证是否该账号 ...
struts2：使用JQuery、JSON和AJAX处理请求
目的在struts2中使用JQuery.JSON.AJAX等技术处理用户请求,并返回结果.返回结果可以是以JSONObject的方式返回,也可以是以JSONArray方式返回结果. 实现 1. 创建 ...
弹窗中使用jquery ui的autocomplete自动完成插件无效果实际是被遮挡了
在普通页面上使用jquery ui的autocomplete自动完成插件时正常显示提供选择的下拉框,但是放到弹窗中的时候就无法显示这个选择的下拉框,其它效果正常: 估计是被弹出窗遮挡了,网络搜索了jq ...
jquery 自动完成 Autocomplete插件汇总
1. jQuery Autocomplete Mod jQuery Autcomplete插件.能够限制下拉菜单显示的结果数. 主页:http://www.pengoworks.com/worksho ...
不定义JQuery插件，不要说会JQuery 分类： JavaScript 2014-11-24 14:18 155人阅读评论(0) 收藏
一:导言有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
[转]不定义JQuery插件，不要说会JQuery
一:导言有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直 ...
不定义JQuery插件，不要说会JQuery
转自:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#") ...
aspx中的表单验证 jquery.validate.js 的使用以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲上面是效果,下面来说使用步骤 jQuery.Valid ...

随机推荐

WeexSDK之注册Modules
注册Modules的流程和注册Components非常类似. + (void)_registerDefaultModules { [self registerModule:@"dom&quo ...
MVC 5使用TempData Object跨视图传递数据
经过一系列显示数据的练习:<MVC 5使用ViewData(对象)显示数据>http://www.cnblogs.com/insus/p/3377178.html<MVC 5使用Vi ...
What does git fsck stand for?
fsck -> File System ChecK https://stackoverflow.com/questions/21151945/what-does-git-fsck-stand-f ...
PHP注释
PHP支持C.C++和 Shell 脚本风格的注释. 单行注释两个反斜线组成的单行注释 // 注释内容一个井号组成的单行注释 # 注释内容说明:PHP单行注释几乎用的都是//,很少使用#来注释内 ...
Shell-1--概念
Windows系统CMD常用命令大全
命令简介 cmd是command的缩写.即命令行 . 虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行安全.稳定,有的用户还在使用,所以一 ...
python --第三方登录--微博
理解第三方登录的流程: 用户向本地应用商城发起请求,我要用微博进行登录我们的商城凑一个url让用户跳转到第三方应用的url(微博的登录页面) 用户在该界面点击输入用户名密码之后,点击授权. 微博有个 ...
django rest framework mixins小结
本篇对drf中的mixins进行简要的分析总结. from rest_framework import viewsets 在这个viewsets中,只有5类Minxin,他们与http方法对应如下: ...
Servlet-转发和重定向的区别
实际发生位置不同,地址栏不同转发是发生在服务器上的转发是由服务器进行跳转的,细心的朋友会发现,在转发的时候,浏览器的地址栏是没有发生变化的,在我访问Servlet111的时候,即使跳转到了Serv ...
Runtime 自动化归档
Runtime的使用 (id)initWithCoder:(NSCoder *)decoder { if (self = [super init]) { unsigned ; Ivar *ivars ...

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

jQuery:SP.NET Autocomplete Textbox Using jQuery, JSON and AJAX的更多相关文章

随机推荐

热门专题