项目地址:https://github.com/twitter/typeahead.js

直接贴代码了:

  1. @section headSection
  2. {
  3. <script type="text/javascript">
  4. $(document).ready(function () {
  5. var substringMatcher = function(strs) {
  6. return function findMatches(q, cb) {
  7. var matches, substringRegex;
  8.  
  9. // an array that will be populated with substring matches
  10. matches = [];
  11.  
  12. // regex used to determine if a string contains the substring `q`
  13. substrRegex = new RegExp(q, 'i');
  14.  
  15. // iterate through the pool of strings and for any string that
  16. // contains the substring `q`, add it to the `matches` array
  17. $.each(strs, function(i, str) {
  18. if (substrRegex.test(str)) {
  19. matches.push(str);
  20. }
  21. });
  22.  
  23. cb(matches);
  24. };
  25. };
  26.  
  27. var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  28. 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  29. 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  30. 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  31. 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  32. 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  33. 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  34. 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  35. 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
  36. ];
  37.  
  38. $('#trad_cod_textbox').typeahead({
  39. hint: false,
  40. highlight: false,
  41. minLength: 1
  42. },
  43. {
  44. name: 'states',
  45. source: substringMatcher(states),
  46. limit:10
  47. });
  48. });
  49. </script>
  50. }
  51. @Html.Partial("UCjQueryTypeAheadJsScript")
  52.  
  53. <!-- 这里就是文本框 -->
  54. <input id="trad_cod_textbox" class="text-input" type="text" value="">

UCjQueryTypeAheadJsScript.cshtml

  1. <!-- both bloodhound.js and typeahead.jquery.js have a dependency on jQuery 1.9+. -->
  2. <script src="~/resources/plugins/jQuery-type-ahead.js/typeahead.bundle.min.js"></script>
  3. <link href="~/resources/plugins/jQuery-type-ahead.js/examples.css" rel="stylesheet" />

Controller.cs

  1. public ActionResult Trade_Code_List_Search_By_Trad_Cod(string searchTradCode)
  2. {
  3. List<Trd_Mas_Simple_Info> simpleTradMasList = new Trd_MasService().GetSimpleListByTradCode(searchTradCode);
  4. return Json(simpleTradMasList.Select(c => c.trd_cod + " - " + c.trd_des), JsonRequestBehavior.AllowGet);
  5. }

examples.css

  1. .tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
  2. .tt-hint { color: #999 }
  3. .tt-menu { width: 422px; margin: 12px 0; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); }
  4. .tt-suggestion { padding: 3px 20px; font-size: 18px; line-height: 24px; }
  5. .tt-suggestion:hover { cursor: pointer; color: #fff; background-color: #0097cf; }
  6. .tt-suggestion.tt-cursor { color: #fff; background-color: #0097cf; }
  7. .tt-suggestion p { margin:; }
  8. .gist { font-size: 14px; }

谢谢浏览!

使用 jQuery.TypeAhead 让文本框自动完成 (一)(最简单的用法)的更多相关文章

  1. 使用 jQuery.TypeAhead 让文本框自动完成 (四)(自定义模板)

    项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...

  2. 使用 jQuery.TypeAhead 让文本框自动完成 (三)(服务器返回 JSON 复杂对象数组)

    项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...

  3. 使用 jQuery.TypeAhead 让文本框自动完成 (二)(访问远程数据)

    项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...

  4. 基于JQuery实现的文本框自动填充功能

    1. 实现的方法 /* * js实现的文本框的自动完成功能 */ function doAutoComplete(textid,dataid,url){ $("#" + texti ...

  5. 使用 jQuery.AutoComplete 让文本框自动完成

    直接贴代码了. @section headSection { <script type="text/javascript"> $(document).ready(fun ...

  6. Jquery实现 TextArea 文本框根据输入内容自动适应高度

    原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...

  7. (三)在js(jquery)中获得文本框焦点和失去焦点的方法

    在js(jquery)中获得文本框焦点和失去焦点的方法   文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...

  8. Creating Dialogbased Windows Application (4) / 创建基于对话框的Windows应用程序(四)Edit Control、Combo Box的应用、Unicode转ANSI、Open File Dialog、文件读取、可变参数、文本框自动滚动 / VC++, Windows

    创建基于对话框的Windows应用程序(四)—— Edit Control.Combo Box的应用.Unicode转ANSI.Open File Dialog.文件读取.可变参数.自动滚动 之前的介 ...

  9. JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点

    今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, Jav ...

随机推荐

  1. java基础(7):自定义类、ArrayList集合

    1. 引用数据类型(类) 1.1 引用数据类型分类 提到引用数据类型(类),其实我们对它并不陌生,如使用过的Scanner类.Random类. 我们可以把类的类型为两种: 第一种,Java为我们提供好 ...

  2. JVM中优化指南

    JVM中优化指南 如何将新对象预留在年轻代 如何让大对象进入年老代 如何设置对象进入年老代的年龄 稳定的 Java 堆 VS 动荡的 Java 堆 增大吞吐量提升系统性能 尝试使用大的内存分页 使用非 ...

  3. 重新安装和更新所有的 nuget包

    重新安装指定项目中所有的 nuget 包 Update-Package -ProjectName MyProject –reinstall 更新指定项目中所有的 nuget 包 Update-Pack ...

  4. Kotlin介绍(非原创)

    文章大纲 一.Kotlin简介二.Kotlin相比Java优势三.Kotlin与Java混合使用四.参考文章   一.Kotlin简介 1. 什么是Kotlin 安卓和Java,前者是最受欢迎的移动开 ...

  5. MSSQL 插入数据时候,如果存在则更新的方法分享

    摘要:下文讲述MSSQL中,插入数据时,如果存在则更新,否则就插入数据的方法分享实验环境:sql server 2017 mssql中,我们可以采用 MERGE INTO 关键字实现此功能,当两者匹配 ...

  6. python3基础学习(1)

    python基础内容讲解主要内容: 1.使用编辑器(IDE) 2.第一个“hello world” 3.何所谓“变量” 4.python与其他主流语言输出对比 5.数据类型 6.python用作“计算 ...

  7. Python中线程的使用

    并发:多个任务同一时间段进行 并行:多个任务同一时刻进行 线程的实现 线程模块 Python通过两个标准库_thread 和threading,提供对线程的支持 , threading对_thread ...

  8. 修改postgresql 密码

    sudo -u postgres psql -c "alter user postgres password '123456';"

  9. Tangent element-Vs虚拟调色台安装配置

    iPad安装element-Vs 从Tangent网站下载Element-Vs的Tangent Hub程序安装 确保系统防火墙允许对Tangent Hub的网络访问并且与iPad共用一个局域网连接 开 ...

  10. mysql命令大全一

    mysql -u root -p;create database qa;show databases;use qa; create table results(id int not null auto ...