JQueryUI的autocomplete调用远程数据（ashx和webservice)
来源：互联网 发布：淘宝托管代运营 编辑：程序博客网 时间：2024/06/03 20:46
<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title></title> <link rel="stylesheet" href="../JQueryUI/themes/base/jquery.ui.all.css"><script type="text/javascript" src="../JQuery/jquery-1.6.2.min.js"></script><script type="text/javascript" src="../JQueryUI/ui/jquery.ui.core.js"></script><script type="text/javascript" src="../JQueryUI/ui/jquery.ui.widget.js"></script><script type="text/javascript" src="../JQueryUI/ui/jquery.ui.position.js"></script><script type="text/javascript" src="../JQueryUI/ui/jquery.ui.autocomplete.js"></script><script type="text/javascript" src="../json/json2.js"></script><style type="text/css">#project-label {display: block;font-weight: bold;margin-bottom: 1em;}#project-icon {float: left;height: 32px;width: 32px;}#project-description {margin: 0;padding: 0;}</style><script type="text/javascript"> $(function() { var projects = [{ value: "jquery", label: "jQuery", desc: "the write less, do more, JavaScript library", icon: "jquery_32x32.png"},{ value: "中国", label: "jQuery UI", desc: "the official user interface library for jQuery", icon: "jqueryui_32x32.png"},{ value: "sizzlejs", label: "Sizzle JS", desc: "a pure-JavaScript CSS selector engine", icon: "sizzlejs_32x32.png"} ]; $("#project").autocomplete({ minLength: 0, //source: "GetAllWords.ashx", source: function(request, response) { //$.ajax({ // url: "GetAllWords.ashx", // data: request, // dataType: "json", // success: function(data) { // response(data); // }, // error: function(result, status) { // alert('错误信息'); // } //}); $.ajax({ url: "GetAllWordsService.asmx/GetAllWords", datatype: "json", data: "{ 'term': 'j'}", type: "POST", contentType: "application/json", success: function(data) { var dd = eval("(" + data.d + ")") response(dd); }, error: function(result, status) { alert('错误信息'); } }); }, focus: function(event, ui) { $("#project").val(ui.item.label); return false; }, select: function(event, ui) { $("#project").val(ui.item.label); $("#project-id").val(ui.item.value); $("#project-description").html(ui.item.desc); $("#project-icon").attr("src", "images/" + ui.item.icon); return false; } }) .data("autocomplete")._renderItem = function(ul, item) { return $("<li></li>") .data("item.autocomplete", item) .append("<a>" + item.label + "<br>" + item.desc + "</a>") .appendTo(ul); }; $("#btnSubmit").click(function() { var id = $("#project-id").val(); alert(id); }); });</script></head><body> <form id="form1" runat="server"> <div class="demo"> <div id="project-label">Select a project (type "j" for a start):</div> <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"/> <input id="project"/> <input type="hidden" id="project-id"/><input type="button" id="btnSubmit" title="提交" value="提交"/> <p id="project-description"></p> </div><!-- End demo --> <div class="demo-description"> <p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p> <p>Try typing "j" to get a list of projects or just press the down arrow.</p> </div><!-- End demo-description --> </form></body></html>
后台代码：
GetAllWords.ashx
Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest If context.Request.QueryString("term") IsNot Nothing AndAlso context.Request.QueryString("term") <> "" Then context.Response.ContentType = "text/plain" context.Response.Buffer = True context.Response.AddHeader("pragma", "no-cache") context.Response.AddHeader("cache-control", "") context.Response.CacheControl = "no-cache" Dim strdata As String = "" strdata = "[{""value"": ""jquery"",""label"": ""jQuery"",""desc"": ""the write less, do more, JavaScript library"",""icon"": ""jquery_32x32.png""}," strdata += "{""value"": ""china"",""label"": ""jQuery UI"",""desc"": ""the official user interface library for jQuery"",""icon"": ""jqueryui_32x32.png""}," strdata += "{""value"": ""sizzlejs"",""label"": ""Sizzle JS"",""desc"": ""a pure-JavaScript CSS selector engine"",""icon"": ""sizzlejs_32x32.png""}]" context.Response.Write(strdata) context.Response.Flush() context.Response.Close() context.Response.[End]() End IfEnd Sub
GetAllWordsService.asmx
Imports System.Web.ServicesImports System.Web.Services.ProtocolsImports System.ComponentModel' 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。<System.Web.Script.Services.ScriptService()> _<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _<ToolboxItem(False)> _Public Class GetAllWordsService Inherits System.Web.Services.WebService <WebMethod()> _ Public Function HelloWorld() As String Return "Hello World" End Function <WebMethod(EnableSession:=True)> _ Public Function GetAllWords(ByVal term As String) As String Dim strdata As String = "" strdata = "[{""value"": ""jquery"",""label"": ""jQuery"",""desc"": ""the write less, do more, JavaScript library"",""icon"": ""jquery_32x32.png""}," strdata += "{""value"": ""china"",""label"": ""jQuery UI"",""desc"": ""the official user interface library for jQuery"",""icon"": ""jqueryui_32x32.png""}," strdata += "{""value"": ""sizzlejs"",""label"": ""Sizzle JS"",""desc"": ""a pure-JavaScript CSS selector engine"",""icon"": ""sizzlejs_32x32.png""}]" Return strdata End FunctionEnd Class
- JQueryUI的autocomplete调用远程数据（ashx和webservice)
- jQueryUI-autocomplete的使用
- WebService的远程调用
- jqueryui的autocomplete一个简单例子
- WindowsMobile调用WebService获取远程数据库的数据
- ASP远程调用ashx文件
- 如何调用远程的WebService
- webservice的远程调用方法
- http://jqueryui.com/autocomplete/
- JQueryUI之Autocomplete
- jqueryui autoComplete 组合下拉框过长问题的解决
- 自动补全 jqueryUi 的autocomplete部件,中文不灵敏问题
- 利用ashx实现AJAX的异步数据调用
- net调用远程机器上的WebService
- 接收远程调用webservice返回的数组
- 远程调用服务器端的webservice接口
- C#winForm调用WebService的远程接口
- 远程调用webservice接口的实现方法
- acm细节
- Package-Pipeline
- cocos2d-x 之 CCTextureAtlas 简介
- libgdx之粒子特效
- 一些函数
- JQueryUI的autocomplete调用远程数据（ashx和webservice)
- ASIHTTPRequest 在工程中的运用
- Android 获取联系人资料。
- 四道智力题，挑战你的编程极限
- 修改sql2008默认查询返回行数
- Tree Recovery解题报告
- C#中传递参数的类型
- 碎碎——我的学习缺少什么？
- WIFI驱动设计原理
