使用typeahead.js可以实现预先输入,即智能提示,本篇在ASP.NET MVC下实现。实现效果如下:

首先是有关城市的模型。

    public class City
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string PinYin { get; set; }
    }

在HomeController中响应前端请求返回有关City的json数据。

        public ActionResult GetCitiesJson()
        {
            var result = new List<City>()
            {
                new City(){Id = 1, Name = "青岛",PinYin = "qingdao"},
                new City(){Id = 10, Name = "青山",PinYin = "qingshan"},
                new City(){Id = 11, Name = "青峰",PinYin = "qingfeng"},
                new City(){Id = 2, Name = "武汉",PinYin = "wuhan"},
                new City(){Id = 3, Name = "烟台",PinYin = "yantai"},
                new City(){Id = 4, Name = "哈尔滨",PinYin = "haerbing"},
                new City(){Id = 5, Name = "北京",PinYin = "beijing"},
                new City(){Id = 6, Name = "安阳",PinYin = "angyang"},
                new City(){Id = 7, Name = "长春",PinYin = "changchun"},
                new City(){Id = 8, Name = "东阳",PinYin = "dongyang"},
                new City(){Id = 9, Name = "葛洲坝",PinYin = "gezhoubei"}
            };
            return Json(result,JsonRequestBehavior.AllowGet);
        }    

在视图中先加载City集合,再使用预先输入功能。

@section styles
{
    <link href="~/Content/TypeHead.css" rel="stylesheet" />
}

<div style="margin: 50px;">
    <input class="typeahead" type="text" placeholder="输入城市名称">
</div>

@section scripts
{
    <script src="~/Scripts/typeahead.bundle.js"></script>
    <script type="text/javascript">

        $(function () {

            $.getJSON('@Url.Action("GetCitiesJson","Home")', function(data) {
                if (data) {
                    $.each(data, function(index, city) {
                        cities.push(city.Name);
                    });
                }
            });


            //预先输入功能
            $('.typeahead').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            },
            {
                name: 'city',
                displayKey: 'value',
                source: substringMatcher(cities)
            });
        });


        var cities = [];

        //参数arr表示数据源 数组
        var substringMatcher = function (arr) {
            return function findMatches(q, cb) {
                var substrRegex;
                var matches = [];

                substrRegex = new RegExp(q, 'i');

                $.each(arr, function (i, ele) {
                    if (substrRegex.test(ele)) {
                        matches.push({ value: ele });
                    }
                });

                cb(matches);
            };
        };

    </script>
}


如何同时支持拼音和汉字的预先输入、智能提示呢?My dear friends, Any idea?

在ASP.NET MVC中使用typeahead.js支持预先输入,即智能提示的更多相关文章

  1. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  2. ASP.NET MVC 中单独的JS文件中获取Controller中设定的值

    1,在Controller中的Action 中将指定值写上.       //       // GET: /Home/       public ActionResult Index()       ...

  3. 在Asp.Net MVC 中如何用JS访问Web.Config中appSettings的值

    应用场景: 很多时候我们要在Web.Config中添加appSettings的键值对来标识一些全局的信息,比如:调用service的domain,跳转其他网站页面的url 等等: 那么此时就涉及到了一 ...

  4. 记录:asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6

    @{ViewBag.Title = "完美结合";} <script>var G_start_time = new Date;</script> <! ...

  5. ASP.NET MVC 中CSS JS压缩合并 功能的使用方法

    通过压缩合并js文件和css文件,可以减少 服务器的响应 次数和 流量,可以大大减小服务器的压力,对网站优化有比较明显的帮助!压缩合并 css 文件和js文件是网站优化的一个 比较常用的方法. ASP ...

  6. angular.js的路由和模板在asp.net mvc 中的使用

    angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...

  7. js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域

    js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...

  8. C# MVC 用户登录状态判断 【C#】list 去重(转载) js 日期格式转换(转载) C#日期转换(转载) Nullable&lt;System.DateTime&gt;日期格式转换 (转载) Asp.Net MVC中Action跳转(转载)

    C# MVC 用户登录状态判断   来源:https://www.cnblogs.com/cherryzhou/p/4978342.html 在Filters文件夹下添加一个类Authenticati ...

  9. 如何在 ASP.NET MVC 中集成 AngularJS(3)

    今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...

随机推荐

  1. Struts2框架简介和示例

    struts2框架 Struts2是java web的框架,在Java Web开发中,表示层框架,其核心是通过扩展Servlet来帮助处理http请求. Struct2的基本流程 Struct2的框架 ...

  2. OOP过度抽象

    OI的时候,解决问题是第一位的,别老想着可维护性.能过就行啦,又不是工程. 下面是两篇相关的文章 来自酷壳 编程真难啊 2009年9月3日 陈皓 上周,在Sun的Java论坛上出现了一个这样的帖子,L ...

  3. winform客户端利用webClient实现与Web服务端的数据传输

    由于项目需要,最近研究了下WebClient的数据传输.关于WebClient介绍网上有很多详细介绍,大概就是利用WebClient可以实现对Internet资源的访问.无外乎客户端发送请求,服务端处 ...

  4. SolrCloud攻略

    SolrCloud攻略 近期一直在使用SolrCloud,乘着酒醉大概总结一下. 1.安装 原来一直有个误区,认为SolrCloud启动时,必须至少有个core才可以,其实不然. 首先按照Solr官方 ...

  5. go学习(二)目录管理

    1. go 环境变量 GOROOT golang 安装目录的绝对路径 GOPATH 工作目录(worksapce) GOBIN go install编译存放路径.不允许设置多个路径.可以为空.为空时则 ...

  6. SQLServer之创建嵌套触发器

    嵌套触发器创建规则 当触发器执行启动其他触发器的操作时,DML 和 DDL 触发器都是嵌套触发器. 这些操作都可以启动其他触发器等. DML 触发器和 DDL 触发器最多可以嵌套 32 层. 可以通过 ...

  7. Caffe:如何将图片数据转换成lmdb文件

    1 图片信息的转换 在caffe中经常使用的数据类型是lmdb或leveldb;不是常见的jpg,jpeg,png,tif等格式;因此,需要进行格式转换,通过输入你自己的图片目录(下有的大量图片)转换 ...

  8. CSS中的继承

    继承:子元素继承父元素的样式,但是并不是所有属性都是默认继承的. 通过文档中的 inherited:yes 来判断属性是否可以继承,关于继承可以参见css的继承关键字: 一.无继承性的属性 1.dis ...

  9. jsoup对 HTML 文档的解析和操作

    本文手动转载自http://www.cnblogs.com/chenying99/archive/2013/01/04/2844615.html,仅根据个人需要对实用部分进行转载,详细请阅读原文. j ...

  10. 【C语言】练习2-8

     题目来源:<The C programming language>中的习题P38  练习2-1:  编写一个函数rightrot(x,n),该函数返回将x循环右移(即从最右端移除的位将从 ...