MVC笔记3:JQuery AutoComplete组件
1.引入以下js和css
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet"
type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet"
type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"
type="text/javascript"></script>
2. html代码如下
<input type="text" id="t" name="t" data-autocomplete-source="@Url.Action("News","AutoComplete")" />
3.后台代码如下:
public ActionResult News()
{
var list = db.Artists.Select(m => new { value=m.Name}).ToList(); return Json(list,JsonRequestBehavior.AllowGet);
}
4. js调用代码如下
<script type="text/ecmascript"> $("#t").each(function () {
var target = $(this);
target.autocomplete({ source: target.attr("data-autocomplete-source") }); }) </script>
MVC笔记3:JQuery AutoComplete组件的更多相关文章
- 【ASP.Net MVC】在AspNet Mvc使用JQuery AutoComplete组件
在AspNet Mvc使用JQuery AutoComplete组件 官方文档: http://api.jqueryui.com/autocomplete/#entry-examples 要使用JQu ...
- Bootstrap Typeahead/Jquery autocomplete自动补全
使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...
- MVC+Jquery+autocomplete(汉字||拼音首字母搜索)
最近项目中用到了autocomplete了,总结一下经验. 我们先来看一下效果:
- JqueryUI学习笔记-自动完成autocomplete
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Inse ...
- [Jquery] Jquery AutoComplete的使用方法实例
jQuery的Autocomplete(自动完成.自动填充)插件 jquery-autocomplete配置: <script type="text/javascript" ...
- [转]jQuery.Autocomplete实现自动完成功能(详解)
本篇文章除了介绍jquery.autocomplete基本参数外,主要说明jquery.autocomplete的数据源的格式问题. 1.jquery.autocomplete参考地址 htt ...
- jQuery.Autocomplete实现自动完成功能(详解)
1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http://do ...
- jquery.autocomplete自动补全功能
项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...
- Jquery AutoComplete的使用方法实例
jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项 ...
随机推荐
- itext操作PDF文件添加水印
功能描述:添加图片和文字水印 /** * * [功能描述:添加图片和文字水印] [功能详细描述:功能详细描述] * @param srcFile 待加水印文件 * @param destFile 加水 ...
- CSS样式覆盖规则
有一下问题, 想让下面的border生效 ,#比. 优先级高, #navigator { height: 100%; width: 200; position: absolute; left: 0; ...
- String Matching Content Length
hihocoder #1059 :String Matching Content Length 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 We define the ...
- ARM汇编指令集
一.跳转指令.跳转指令用于实现程序流程的跳转,在ARM程序中有以下两种方法可以实现程序流程的跳转. Ⅰ.使用专门的跳转指令.Ⅱ.直接向程序计数器PC写入跳转地址值. 通过向程序计数器PC写入跳转地址值 ...
- string字符串转C风格字符串 进而转换为数字
要求如题 头文件stdlib.h中有一个函数atof() 可以将字符串转化为双精度浮点数(double) double atof(const char *nptr); 此字符串为C风格字符串,因此需要 ...
- Android--->Button按钮操作
main.xml中设置两个按钮 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...
- 认识ExtJS(04)--常见Web框架的ExtJS改造
常见Web框架的ExtJS改造 怎样开始改造工作? 改造主要集中在对表现层的修改,底层的数据库访问不需要进行任何的变动.也就是说主要集中早这2个方面:一方面是表现部分即是JSP页面:另一方面是客户端与 ...
- 修改Python文件日志输出位置
Python logging模块介绍:http://blog.chinaunix.net/uid-26000296-id-4372063.html [root@fuel ~]# vi /var/lib ...
- Pythagorean Triples
Pythagorean Triples time limit per test 1 second memory limit per test 256 megabytes input standard ...
- copy-on-write学习
最近知识梳理不够,那就整理点以前blog的东西.这儿就看COW(copy-on-write),cow技术主要是为了提高程序在单步操作时的系统响应速度而设计的,它通过将不是立即必要的空间分配,数据复制等 ...