使用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<System.DateTime>日期格式转换 (转载) 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. House Robber I & II & III

    House Robber You are a professional robber planning to rob houses along a street. Each house has a c ...

  2. 用Java检测远程主机是否能被连接

    有人推荐使用java的Runtime.exec()方法来直接调用系统的Ping命令.也有人完成了纯Java实现Ping的程序,使用的是Java的NIO包(native io, 高效IO包).我个人认为 ...

  3. Java实现继承过程概述

    super(); 在调用子类的构造器的时候,如果没有显示的写出 super(); ,那么,编译器会在佛那个加上 super(); 无参构造器 如果想调用父类的有参构造器,那么,必须显示的调用,编译器不 ...

  4. activiti主要组件解析

    Activiti内部实现中,各主要部件关系 对外,提供Service服务,它是无状态的. 这些Service包括: protected RepositoryService repositoryServ ...

  5. DOM文档对象模型简介

    DOM简介     DOM是W3C(万维网联盟)的标准 "W3C文档对象模型DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构.样式".W3C DOM ...

  6. python2.x下pip install mysql-python报错解决办法

    在https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysql-python 下载该驱动网盘链接:https://pan.baidu.com/s/1r0fNYnU ...

  7. ExpressMapper- The New .NET Mapper!

    推荐,据测试比手工映射的效率还高. https://www.codeproject.com/Tips/1009198/Expressmapper-The-New-NET-Mapper

  8. hdu 5038 (2014北京网络赛G 排序水题)

    题意:有n个数字,带入10000 - (100 - ai) ^ 2公式得到n个数,输出n个数中频率最大的数,如果有并列就按值从小到大都输出输出,如果频率相同的数字是全部的n个数,就输出Bad....题 ...

  9. webstorm减少内存占用

    首先,按照我说的设置之后要重启才行. 在项目里找到不需要监听的文件夹右键:Mark Directory As => Cancel Exclusion 然后重启,嘿嘿,成功了!

  10. 【LOJ】#2178. 「BJOI2017」机动训练

    题解 遇见平方和就转有序对呗 dp类似从很多点出发每次走一步的转移方式 然后我too naive的,枚举路径长度来决定更新次数,愉快TLE 改成记搜就过了 代码 #include <bits/s ...