使用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. ispoweroftwo 判断2的次幂【转】

    转自:https://www.cnblogs.com/troublelost/p/5236391.html 首先结果是: public bool IsPowerOfTwo(int n) { if(n& ...

  2. click模块使用

    # coding:utf8 import time import click @click.command() @click.option('--id', default='123', help='a ...

  3. Oracle 数据库和监听器开机自启动两种实现方法

    数据库和监听器开机自启动   编辑oratab文件: 修改:orcl:/u01/app/oracle/product/11.2.0/db_1:N            orcl:/u01/app/or ...

  4. 001_docker-compose构建elk环境

    由于打算给同事分享elk相关的东西,搭建配置elk环境太麻烦了,于是想到了docker.docker官方提供了docker-compose编排工具,elk集群一键就可以搞定,真是兴奋.好了下面咱们开始 ...

  5. 初始ASP.NET数据控件GridView

    使用GridView控件绑定数据源 GridView控件个人认为就是数据表格控件,它以表格的形式显示数据源中的数据.每列表示一个字段,每行表示一条记录.     GridView控件支持在页面有一下功 ...

  6. Android方法引用数超过65535优雅解决

    随着应用不断迭代更新,业务线的扩展,应用越来越大(比如:集成了各种第三方SDK或者公共开源的Library文件.jar文件)这样一来,项目耦合性就很高,重复作用的类就越来越多了,SO:问题就来了.相信 ...

  7. 在阿里云申请Symantec免费SSL证书操作流程

    2016年阿里云与国内证书颁发机构天威诚信推出了基于Symantec(赛门铁克)的免费SSL证书,有需要免费SSL证书产品的可以前往阿里云进行申请. 申请地址:阿里云云盾证书服务—Symantec免费 ...

  8. java 标准异常

    一.Throwable这个Java类被用来表示任何可以作为异常被抛出的类.Throwable对象可分为两种类型(从Throwable继承而得到的类型): 1.) Error用来表示编译时和系统错误 2 ...

  9. SqlServer代理作业

    最近一直在学习SqlServer 作业方面的知识,总结一下. 一:作业存在的库. msdb  use msdb Msdb数据库是代理服务数据库,为其报警.任务调度和记录操作员的操作提供存储空间. 二: ...

  10. 【PAT】1051 Pop Sequence (25)(25 分)

    Given a stack which can keep M numbers at most. Push N numbers in the order of 1, 2, 3, ..., N and p ...