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组件的更多相关文章

  1. 【ASP.Net MVC】在AspNet Mvc使用JQuery AutoComplete组件

    在AspNet Mvc使用JQuery AutoComplete组件 官方文档: http://api.jqueryui.com/autocomplete/#entry-examples 要使用JQu ...

  2. Bootstrap Typeahead/Jquery autocomplete自动补全

    使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...

  3. MVC+Jquery+autocomplete(汉字||拼音首字母搜索)

    最近项目中用到了autocomplete了,总结一下经验. 我们先来看一下效果:

  4. JqueryUI学习笔记-自动完成autocomplete

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Inse ...

  5. [Jquery] Jquery AutoComplete的使用方法实例

    jQuery的Autocomplete(自动完成.自动填充)插件 jquery-autocomplete配置: <script type="text/javascript" ...

  6. [转]jQuery.Autocomplete实现自动完成功能(详解)

    本篇文章除了介绍jquery.autocomplete基本参数外,主要说明jquery.autocomplete的数据源的格式问题.     1.jquery.autocomplete参考地址 htt ...

  7. jQuery.Autocomplete实现自动完成功能(详解)

    1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http://do ...

  8. jquery.autocomplete自动补全功能

    项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...

  9. Jquery AutoComplete的使用方法实例

    jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项 ...

随机推荐

  1. itext操作PDF文件添加水印

    功能描述:添加图片和文字水印 /** * * [功能描述:添加图片和文字水印] [功能详细描述:功能详细描述] * @param srcFile 待加水印文件 * @param destFile 加水 ...

  2. CSS样式覆盖规则

    有一下问题, 想让下面的border生效 ,#比. 优先级高, #navigator { height: 100%; width: 200; position: absolute; left: 0; ...

  3. String Matching Content Length

    hihocoder #1059 :String Matching Content Length 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 We define the ...

  4. ARM汇编指令集

    一.跳转指令.跳转指令用于实现程序流程的跳转,在ARM程序中有以下两种方法可以实现程序流程的跳转. Ⅰ.使用专门的跳转指令.Ⅱ.直接向程序计数器PC写入跳转地址值. 通过向程序计数器PC写入跳转地址值 ...

  5. string字符串转C风格字符串 进而转换为数字

    要求如题 头文件stdlib.h中有一个函数atof() 可以将字符串转化为双精度浮点数(double) double atof(const char *nptr); 此字符串为C风格字符串,因此需要 ...

  6. Android--->Button按钮操作

    main.xml中设置两个按钮 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...

  7. 认识ExtJS(04)--常见Web框架的ExtJS改造

    常见Web框架的ExtJS改造 怎样开始改造工作? 改造主要集中在对表现层的修改,底层的数据库访问不需要进行任何的变动.也就是说主要集中早这2个方面:一方面是表现部分即是JSP页面:另一方面是客户端与 ...

  8. 修改Python文件日志输出位置

    Python logging模块介绍:http://blog.chinaunix.net/uid-26000296-id-4372063.html [root@fuel ~]# vi /var/lib ...

  9. Pythagorean Triples

    Pythagorean Triples time limit per test 1 second memory limit per test 256 megabytes input standard ...

  10. copy-on-write学习

    最近知识梳理不够,那就整理点以前blog的东西.这儿就看COW(copy-on-write),cow技术主要是为了提高程序在单步操作时的系统响应速度而设计的,它通过将不是立即必要的空间分配,数据复制等 ...