服务器端后台代码:

 1          private string GetModelNames() {
2 return @"[
3 {
4 'value': 'jquery',
5 'label': 'jQuery',
6 'desc': 'the write less, do more, JavaScript library',
7 },
8 {
9 'value': 'jquery-ui',
10 'label': 'jQuery UI',
11 'desc': 'the official user interface library for jQuery',
12 },
13 {
14 'value': 'sizzlejs',
15 'label': 'Sizzle JS',
16 'desc': 'a pure-JavaScript CSS selector engine',
17 }
18 ]".Replace("'", "\"");
19 }

第一种方式:动态数据源

Aspx页面代码:

                $("#ModelName2").autocomplete({
minLength: ,
source:function( request, response ) {
$.ajax({
url: "SystemAjaxData.ashx?selectType=getModelNames",
success: function (data) {
var jsonData = eval("(" + data + ")");
response(jsonData);
}
});
},
focus: function (event, ui) {
$("#ModelName2").val(ui.item.label);
return false;
},
select: function (event, ui) {
$("#ModelName2").val(ui.item.label);
$("#ModelNameValue2").val(ui.item.value); return false;
}
});

由于Ajax返回的是字符串,因此必须用eval方法转换成Json对象再返回给Autocomplete插件使用。

第二种方式:固定数据源方式,并且动态改变下拉选择框样式

      var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
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"
}
]; $("#ModelName2").autocomplete({
minLength: ,
source:projects,
focus: function (event, ui) {
$("#ModelName2").val(ui.item.label);
return false;
},
select: function (event, ui) {
$("#ModelName2").val(ui.item.label);
$("#ModelNameValue2").val(ui.item.value); return false;
}
})
.autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>")
.append("<a>" + item.label + "<br>" + item.desc + "</a>")
.appendTo(ul);
};

第三种方式:缓存后台数据源

 var cache = {};
$("#ModelName2").autocomplete({
minLength: ,
source: function( request, response ) {
var term = request.term;
if ( term in cache ) {
response( cache[ term ] );
return;
}
$.ajax({
url: "SystemAjaxData.ashx?selectType=getModelNames",
success: function (data) {
var jsonData = eval("(" + data + ")");
cache[ term ]=jsonData;
response(jsonData);
}
});
},
focus: function (event, ui) {
$("#ModelName2").val(ui.item.label);
return false;
},
select: function (event, ui) {
$("#ModelName2").val(ui.item.label);
$("#ModelNameValue2").val(ui.item.value); return false;
}
});

C#中使用JQueryUI中Autocomplete插件的更多相关文章

  1. [转]jQueryUI中Datepicker(日历)插件的介绍和使用

    http://jqueryui.com/datepicker/ 本文转自:http://blog.csdn.net/redarmy_chen/article/details/7400571 jQuer ...

  2. jQueryUI Autocomplete插件使用入门教程(最新版)---------转载

    前言: jQuery,无需多作介绍,相信各位读者都应该接触或使用过了.jQuery UI,简而言之,它是一个基于jQuery的前端UI框架.我们可以使用jQuery + jQuery UI非常简单方便 ...

  3. 分享20款移动开发中很有用的 jQuery 插件

    今天,很显然每个网站都需要有一个移动优化的界面以提高移动用户的使用体验.在开发任何移动项目时,要尽可能保持每一种资源尺寸都尽可能的小,以给最终用户提供一个好的体验是非常重要的.在这篇文章中我们已经编制 ...

  4. HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)

    因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...

  5. 在Gradle中使用jaxb的xjc插件

    jaxb,全称为Java Architecture for Xml Binding,是一种将java对象与xml建立起映射的技术.其主要提供两个功能,一是将java对象映射为xml,二是将xml映射为 ...

  6. 在Eclipse中制作SSH配置文件提示插件

    原文地址:http://blog.csdn.net/longyuhome/article/details/8968093 这篇博客算是对原先的“在Eclipse中制作和使用struts2配置文件提示插 ...

  7. 关于Eclipse中配置产品启动的插件

    比较省事的是白哥给我一个配置文件(EE_CONF_TEST.launch),使用的方法白哥推荐我新建一个普通的java项目,然后拷贝到这个项目中. 拷贝到项目中之后在Run Configuration ...

  8. Sublime Text 2中前端必备的常用插件

    Sublime Text 2安装的插件和所有预置的插件全部在Packages文件下,可以直接通过”preferences“—>”Browse Pakcages“来访问. Sublime Text ...

  9. elasticsearh 中每个节点中需要有相同的插件

    elasticsearh 中每个节点中需要有相同的插件 [2016-09-13 19:25:24,049][INFO ][discovery.zen ] [node02] failed to send ...

随机推荐

  1. 黑客逃避追踪,为什么要用虚拟机 + TOR + VPN 呢?

    为啥要使用虚拟机 使用虚拟机主要有俩原因. 第一个是为了好收拾,清理痕迹什么的.特别是MAC地址,系统指纹信息等等,这些一旦被收集到都可以作为呈堂证供.用虚拟机,干了坏事把快照恢复一下就好,省的清理c ...

  2. 在Shell里面判断字符串是否为空

     在Shell里面判断字符串是否为空 分类: Linux shell2011-12-28 23:18 15371人阅读 评论(0) 收藏 举报 shell 主要有以下几种方法: echo “$str” ...

  3. error splicing file: file too large解决方法

    FAT32格式的usb最大支持4G的文件,拷贝超过4G的文件需要把usb换成NTFS格式.

  4. 【云计算】docker build如何支持参数化构建?

    docker 1.9.0版本之后,已经支持docker build参数化构建. docker 版本更新记录: github讨论: 参开资料: https://github.com/docker/doc ...

  5. 《ASP.NET1200例》当前上下文中不存在名称configurationmanager

    当前上下文中不存在名称ConfigurationManager的解决方法 今晚做项目在DBHelper.cs类中的数据库连接要改到web.config里面调用,结果在编译的时候却发现提示错误: 当前上 ...

  6. FastReport安装说明(中文版)

    FastReport安装说明(中文版) 内容列表 I. IntroductionI. 介绍II. Manual installing of the FastReport packagesII. 手动安 ...

  7. Eclipse调试:F5、F6、F7、F8

    F5:跳入方法 F6:向下逐行调试 F7:跳出方法 F8:直接跳转到下一个断点 转载自:http://blog.sina.com.cn/s/blog_6271df6f0101d856.html

  8. 一个程序中关于多个osgGA::GUIEventHandler同时存在的问题

    平时使用GUIEventHandler不太注意handle()函数的返回值,觉得返回true或者false都无所谓,其实不然. 我遇到的问题是程序中一个节点添加了GUIEventHandler对象pi ...

  9. 最小的N个和(codevs 1245)

    1245 最小的N个和  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 有两个长度为 N ...

  10. iftop

    http://book.51cto.com/art/201409/452431.htm https://wiki.vpsmm.com/iftop/ http://www.cnblogs.com/Alo ...