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

直接贴代码了:

@section headSection
{
<script type="text/javascript">
$(document).ready(function () {
var bestPictures = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '@Url.Action("Trade_Code_List_Search_By_Trad_Cod")?searchTradCode=%QUERY',
wildcard: '%QUERY'
}
}); $('#trad_cod_textbox').typeahead(null,{
name: 'best-pictures',
source: bestPictures,
//display: 'value',
limit:10
});
});
</script>
}
@Html.Partial("UCjQueryTypeAheadJsScript") <!-- 这里就是文本框 -->
<input id="trad_cod_textbox" class="text-input" type="text" value="">

UCjQueryTypeAheadJsScript.cshtml

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

Controller.cs

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

examples.css

.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); }
.tt-hint { color: #999 }
.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); }
.tt-suggestion { padding: 3px 20px; font-size: 18px; line-height: 24px; }
.tt-suggestion:hover { cursor: pointer; color: #fff; background-color: #0097cf; }
.tt-suggestion.tt-cursor { color: #fff; background-color: #0097cf; }
.tt-suggestion p { margin:; }
.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. PhoneGap+jQuery Mobile+Rest 访问远程数据

    最近研究Mobile Web技术.发现了一个好东西-PhoneGap! 发现用PhoneGap+jQuery Mobile是一个很完美的组合! 本实例通俗易懂.适合广大开发人群:高富帅.白富美.矮穷戳 ...

随机推荐

  1. Mac下如何复制webp图片

      将 WebP 格式图片拖到 Chrome 浏览器标签栏中(浏览器是肯定支持查看的,而且是 Google 自家的),这个时候图片是能够正常查看的.我们右键选中图片,选择「复制图片」. 打开 macO ...

  2. windows 安装使用jupyter及 基础配置

    jupyter 是什么Jupyter Notebooks 是一个交互式笔记本,支持运行 40 多种编程语言,它的本质是一个 开源的 Web 应用程序,我们可以将其用于创建和共享代码与文档,他可以支持实 ...

  3. c# Winform 继承窗体 无法拖动修改控件大小

    问题描述: 一个窗体集成父窗体,发现无法直接拖动修改的控件,比如修改大小等 特征: 不禁使父窗体控件,就算新加一个控件也会这样:鼠标放到控件移动手方块上会出现一个“继承的控件”的tooptip, 异常 ...

  4. java基础(15):常用API(Object、String、StringBuffer)

    1. Java的API及Object类 在以前的学习过程中,我们都在学习对象基本特征.对象的使用以及对象的关系.接下来我们开始使用对象做事情,那么在使用对象做事情之前,我们要学习一些API中提供的常用 ...

  5. PHP代码篇(三)--常用方法

    模块下不间断更新,PHP常用方法,欢迎留言! 一.递归删除指定目录下所有文件及文件夹 /** * 递归删除指定目录下所有文件及文件夹 * @param unknown $path,删除路径 */ fu ...

  6. Web服务器—Nginx

    Nginx常用命令: 启动nginx服务 [root@localhost ~]# service nginx start [root@localhost ~]# systemctl start ngi ...

  7. Java重定向标准输入/输出

    在System类中提供了三个重定向标准输入/输出的方法static void setErr(PrintStream err) 重定向“标准”错误输出流static void setIn(InputSt ...

  8. c# WF 第3节 窗体的属性

    本节内容: 1:如何找到窗口属性 2:窗口属性 1:如何找到窗口属性 2:窗口属性

  9. js 三种存储方式的区别

    javaScript有三种数据存储方式,分别是: sessionStorage localStorage cookie 相同点:都保存在浏览器端,同源的 不同点: ①传递方式不同 cookie数据始终 ...

  10. 使用python发邮件:

    import smtplibfrom email.mime.text import MIMETextfrom email.utils import formataddr#定义发送的内容:msg = M ...