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 ...
随机推荐
- Runtime之实例总结
通过前面几篇对Runtime的讲解,本篇汇总一下Runtime实际中常用的一些场景. 1.获取类的基本信息 获取类名: const char *className = class_getName(cl ...
- 201621123018《java程序设计》第14周作业总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 将 ...
- i==1 && resolve()
for( var i=100000 ; i>0 ; i-- ){ i==1 && resolve() } var dd = 988889;console.log(`${dd}`) ...
- 卖给高通之后的CSR的现状和未来
转眼之间,CSR已经嫁给高通两年了,养在深宫大院大小妾的CSR,到底过的怎么样呢? 从高通官网上查看的结果显示,CSR产品被分成了三类: A 传统的用在耳机音响的CSR86XX系列,这部分改动不大,就 ...
- IOS 整体框架类图值得收藏
Cocoa框架是iOS应用程序的基础,了解Cocoa框架,对开发iOS应用有很大的帮助. 1.Cocoa是什么? Cocoa是OS X和 iOS操作系统的程序的运行环境. 是什么因素使一个程序成为Co ...
- mysql 开发进阶篇系列 27 数据库字符集设置
在安装完数据库后,使用汉字插入到表中,会报错,需要修改字符集类型,如下图所示: -- 插入汉字时报错 INSERT INTO User2 VALUES('张三') -- 查看字符集 SHOW VARI ...
- 从零开始学 Web 之 BOM（四）client系列
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- win32之进程概念
win32之进程 一丶简介 学习WindowsAPI. 之前.我们必须理解什么是进程. 在windows环境下.进程就是一个运行起来的exe程序 进程提供了数据以及资源. 但是怎么使用不管.而是由线程 ...
- 理解交叉熵(cross_entropy)作为损失函数在神经网络中的作用
交叉熵的作用 通过神经网络解决多分类问题时,最常用的一种方式就是在最后一层设置n个输出节点,无论在浅层神经网络还是在CNN中都是如此,比如,在AlexNet中最后的输出层有1000个节点: 而即便是R ...
- spring-boot-2.0.3应用篇 - shiro集成
前言 上一篇:spring-boot-2.0.3源码篇 - 国际化,讲了如何实现国际化,实际上我工作用的模版引擎是freemaker,而不是thymeleaf,不过原理都是相通的. 接着上一篇,这一篇 ...