在ASP.NET MVC中使用typeahead.js支持预先输入,即智能提示
使用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支持预先输入,即智能提示的更多相关文章
- ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传
说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...
- ASP.NET MVC 中单独的JS文件中获取Controller中设定的值
1,在Controller中的Action 中将指定值写上. // // GET: /Home/ public ActionResult Index() ...
- 在Asp.Net MVC 中如何用JS访问Web.Config中appSettings的值
应用场景: 很多时候我们要在Web.Config中添加appSettings的键值对来标识一些全局的信息,比如:调用service的domain,跳转其他网站页面的url 等等: 那么此时就涉及到了一 ...
- 记录:asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6
@{ViewBag.Title = "完美结合";} <script>var G_start_time = new Date;</script> <! ...
- ASP.NET MVC 中CSS JS压缩合并 功能的使用方法
通过压缩合并js文件和css文件,可以减少 服务器的响应 次数和 流量,可以大大减小服务器的压力,对网站优化有比较明显的帮助!压缩合并 css 文件和js文件是网站优化的一个 比较常用的方法. ASP ...
- angular.js的路由和模板在asp.net mvc 中的使用
angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...
- js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域
js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...
- 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 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(3)
今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...
随机推荐
- House Robber I & II & III
House Robber You are a professional robber planning to rob houses along a street. Each house has a c ...
- 用Java检测远程主机是否能被连接
有人推荐使用java的Runtime.exec()方法来直接调用系统的Ping命令.也有人完成了纯Java实现Ping的程序,使用的是Java的NIO包(native io, 高效IO包).我个人认为 ...
- Java实现继承过程概述
super(); 在调用子类的构造器的时候,如果没有显示的写出 super(); ,那么,编译器会在佛那个加上 super(); 无参构造器 如果想调用父类的有参构造器,那么,必须显示的调用,编译器不 ...
- activiti主要组件解析
Activiti内部实现中,各主要部件关系 对外,提供Service服务,它是无状态的. 这些Service包括: protected RepositoryService repositoryServ ...
- DOM文档对象模型简介
DOM简介 DOM是W3C(万维网联盟)的标准 "W3C文档对象模型DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构.样式".W3C DOM ...
- python2.x下pip install mysql-python报错解决办法
在https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysql-python 下载该驱动网盘链接:https://pan.baidu.com/s/1r0fNYnU ...
- ExpressMapper- The New .NET Mapper!
推荐,据测试比手工映射的效率还高. https://www.codeproject.com/Tips/1009198/Expressmapper-The-New-NET-Mapper
- hdu 5038 (2014北京网络赛G 排序水题)
题意:有n个数字,带入10000 - (100 - ai) ^ 2公式得到n个数,输出n个数中频率最大的数,如果有并列就按值从小到大都输出输出,如果频率相同的数字是全部的n个数,就输出Bad....题 ...
- webstorm减少内存占用
首先,按照我说的设置之后要重启才行. 在项目里找到不需要监听的文件夹右键:Mark Directory As => Cancel Exclusion 然后重启,嘿嘿,成功了!
- 【LOJ】#2178. 「BJOI2017」机动训练
题解 遇见平方和就转有序对呗 dp类似从很多点出发每次走一步的转移方式 然后我too naive的,枚举路径长度来决定更新次数,愉快TLE 改成记搜就过了 代码 #include <bits/s ...