在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 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...
随机推荐
- 高通Trustzone and QSEE介绍
http://blog.csdn.net/iamliuyanlei/article/details/52625968
- 2018 ICPC 沈阳网络赛
2018 ICPC 沈阳网络赛 Call of Accepted 题目描述:求一个算式的最大值与最小值. solution 按普通算式计算方法做,只不过要同时记住最大值和最小值而已. Convex H ...
- eclipse中 EAR Libraries 是什么?
eclipse中 EAR Libraries 是 开发EJB工程所需的库包. 由于新建web工程时,eclipse并不能智能化的判断是否该项目以后会用到ejb, 所以为了全面考虑 就已经帮用户导入了E ...
- InteliJ IDEA 简单使用:配置项目所需jdk
1:配置项目所需jdk: File->Project Structure 弹出如下界面: 首先选中SDKs,会出现下图界面:点击“+”标志弹出Add New SDK 然后选择JDK,会弹出路径框 ...
- Python的CGI编程实现-通过接口运行服务器py脚本
yum 安装apcche [apache]yum 安装Apache(Centos 6.9) https://www.cnblogs.com/lauren1003/p/5993654.html只需一行命 ...
- 输出联系变化的数字seq
主要作用:输出联系变化的数字格式:Seq 分割符号 开始 间隔 结束开始默认是1,间隔默认是1,分隔符默认回车一位是结束,两位首末,三位首间隔末,没有四位,开始可以是负数主要参数:-f 指定格式打印- ...
- 图学ES6-6.数值的扩展
- 【LOJ】#2270. 「SDOI2017」天才黑客
题解 显然要记录每个点来的状态,这样会扩充出点度的平方条边,就gg了 删掉所有的点,把每个边拆成两个点,连一条边权为c 这个时候我们考虑对于原先的每个点,将所有与其相连边所需要的节点(不管是进入还是出 ...
- 黑马程序员_java基础笔记(15)...银行业务调度系统_编码思路及代码
—————————— ASP.Net+Android+IOS开发..Net培训.期待与您交流!—————————— 1,面试题目:银行业务调度系统 模拟实现银行业务调度系统逻辑,具体需求如下: 银行内 ...
- 004 @PathVariable映射URL绑定的占位符
一: 1.介绍 带占位符的URL是spring 3.0新增的功能,是向REST发展的重要阶段. @PathVariable可以将URL中占位符参数绑定到控制器处理的方法的入参中:URL中的{xxx}占 ...