项目地址: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. 【51Nod1584】加权约数和(数论)

    [51Nod1584]加权约数和(数论) 题面 51Nod 题解 要求的是\[\sum_{i=1}^n\sum_{j=1}^n max(i,j)\sigma(ij)\] 这个\(max\)太讨厌了,直 ...

  2. CSAPP lab3 bufbomb-缓冲区溢出攻击实验(下)bang boom kaboom

    CSAPP lab3 bufbomb-缓冲区溢出攻击实验(上)smoke fizz CSAPP lab3 bufbomb-缓冲区溢出攻击实验(下)bang boom kaboom 栈结构镇楼 这里先给 ...

  3. web开发中移动端适配

    这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮 ...

  4. Python-标准库(常用模块)

    前言: 之所以为不同模块划分重要程度,是因为大家不不可能精力一直集中,也不可能一下掌握所有, 但这个并不表示重要度低的可以不用掌握 ! 你必须掌握的点是每个模块分别干什么事,今后在需要实现某些功能时能 ...

  5. 苹果 iOS13.2.2 正式版修复闷杀后台问题了?别担心,PerfDog 帮你来检测!

    导语 苹果于上周推送了iOS 13.2版本,带来了用户备受期待的图像处理系统深度融合(Deep Fusion),新增70多个表情.HomeKit安全视频.Siri隐私设置和支持AirPods Pro等 ...

  6. Python之dict(或对象)与json之间转化

    在Python语言中,json数据与dict字典以及对象之间的转化,是必不可少的操作. 在Python中自带json库.通过import json导入. 在json模块有2个方法, loads():将 ...

  7. [N久以前发布的文章]php 获取yahoo股票csv数据并封闭成为接口输出json数据

    思路 先从yahoo接口获取数据,再定义接口,转化成为json输出.只供卡通网(kt5.cn)使用 stock.php 接口处理代码 <?php header("Content-Typ ...

  8. emacs 矩形操作

    emacs 矩形操作 如果使用图形化(GUI)的eamcs,使用M-x cua-mode,很好用,但是如果不是图形化的emacs(emacs -nw)的话,矩形操作就不能使用cua-mode. 非图形 ...

  9. ssh-copy-id 命令自动复制本机公钥到远程机器

    ssh-copy-id 将本机的公钥复制到远程机器的authorized_keys文件中,ssh-copy-id能让你有到远程机器的home, ~./ssh , 和 ~/.ssh/authorized ...

  10. 第十七章 Metasploit Framework

    渗透测试者的困扰▪ 需要掌握数百个工具软件,上千个命令参数,实在记不住▪ 新出现的漏洞PoC/EXP有不同的运行环境要求,准备工作繁琐▪ 大部分时间都在学习使用不同工具的使用习惯,如果能统一就好了▪ ...