使用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. 高通Trustzone and QSEE介绍

    http://blog.csdn.net/iamliuyanlei/article/details/52625968

  2. 2018 ICPC 沈阳网络赛

    2018 ICPC 沈阳网络赛 Call of Accepted 题目描述:求一个算式的最大值与最小值. solution 按普通算式计算方法做,只不过要同时记住最大值和最小值而已. Convex H ...

  3. eclipse中 EAR Libraries 是什么?

    eclipse中 EAR Libraries 是 开发EJB工程所需的库包. 由于新建web工程时,eclipse并不能智能化的判断是否该项目以后会用到ejb, 所以为了全面考虑 就已经帮用户导入了E ...

  4. InteliJ IDEA 简单使用:配置项目所需jdk

    1:配置项目所需jdk: File->Project Structure 弹出如下界面: 首先选中SDKs,会出现下图界面:点击“+”标志弹出Add New SDK 然后选择JDK,会弹出路径框 ...

  5. Python的CGI编程实现-通过接口运行服务器py脚本

    yum 安装apcche [apache]yum 安装Apache(Centos 6.9) https://www.cnblogs.com/lauren1003/p/5993654.html只需一行命 ...

  6. 输出联系变化的数字seq

    主要作用:输出联系变化的数字格式:Seq 分割符号 开始 间隔 结束开始默认是1,间隔默认是1,分隔符默认回车一位是结束,两位首末,三位首间隔末,没有四位,开始可以是负数主要参数:-f 指定格式打印- ...

  7. 图学ES6-6.数值的扩展

  8. 【LOJ】#2270. 「SDOI2017」天才黑客

    题解 显然要记录每个点来的状态,这样会扩充出点度的平方条边,就gg了 删掉所有的点,把每个边拆成两个点,连一条边权为c 这个时候我们考虑对于原先的每个点,将所有与其相连边所需要的节点(不管是进入还是出 ...

  9. 黑马程序员_java基础笔记(15)...银行业务调度系统_编码思路及代码

    —————————— ASP.Net+Android+IOS开发..Net培训.期待与您交流!—————————— 1,面试题目:银行业务调度系统 模拟实现银行业务调度系统逻辑,具体需求如下: 银行内 ...

  10. 004 @PathVariable映射URL绑定的占位符

    一: 1.介绍 带占位符的URL是spring 3.0新增的功能,是向REST发展的重要阶段. @PathVariable可以将URL中占位符参数绑定到控制器处理的方法的入参中:URL中的{xxx}占 ...