bootstrap-typeahead自动补充
官方文档:https://github.com/bassjobsen/Bootstrap-3-Typeahead
这个是基于bootstrap的typeahead与基于jquery的jquery-Typeahead不一样
.html
<input type="text" name="companyFullName" autocomplete="off" data-provide="typeahead" data-fv-notempty="true"
class="typeahead form-control input-sm" placeholder="企业名称"">
.js
$('.typeahead').typeahead({
source: function (query,process) {
var $inputcompanyfullnameval=$inputcompanyfullname.val();
var data={"companyName":$inputcompanyfullnameval};//传递输入框的值,给后台进行模糊查询,每次返回查询后的数据
return $.ajax({
url : $("base").attr("href")+"/customer/role/entitysearch",
type : "POST",
contentType : "application/json",
dataType: "json",
data :JSON.stringify(data),
success: function (data) {
var result = to_Array(data.data);
resultData = data.data;
return process(result);
}
});
},
items:10, //每页显示十条
showHintOnFocus:true, //当鼠标点击时就显示前十条
autoSelect:false
});
如图:

(此图参考菜鸟教程http://www.runoob.com/try/try.php?filename=bootstrap-typehead)
博客地址:http://www.cnblogs.com/windseek/
bootstrap-typeahead自动补充的更多相关文章
- bootstrap - typeahead自动补全插件
$('#Sale').typeahead({ ajax: { url: '@Url.Action("../Contract/GetSale")', //timeout: 300, ...
- Bootstrap Typeahead/Jquery autocomplete自动补全
使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...
- 【Bootstrap】 typeahead自动补全
typeahead 这篇文章记录了我在使用typeahead的一些问题,不是很全,但是基本够用. Bootstrap提供typeahead组件来完成自动补全功能. 两种用法: 直接给标签添加属性 &l ...
- C++Builder 代码编辑器 回车自动补充括弧
两大问题 括弧和折叠 一.括弧 XE7,回车,自动补充括弧} 好用,有时候不准确,代码量多,不知道什么原因就引起错误,总是多一个括弧,一回车就加一个括弧,都不敢回车写代码了,怎么关闭此选项? 找到了, ...
- CentOS 笔记(六) 历史命令 自动补充
history #出现历史的命令 #执行具体的一条历史命令 !458 ②安装自动补充功能 yum install -y bash-completion #输入命令 按Tab 会显示所有内容 syste ...
- 通过rng-tools自动补充熵池
通过rng-tools自动补充熵池原文 https://blog.csdn.net/tiantao2012/article/details/78792046首先查看系统当前熵池的大小# cat /pr ...
- 使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。
示例代码: <input type="text" id="addr"/> <input type="text" hidde ...
- 使用 Bootstrap Typeahead 组件
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...
- 使用升级版的 Bootstrap typeahead v1.2.2
上次介绍了 Bootstrap 2 中附带的 typeahead,功能强大,但是使用起来不太方便,作者 Terry Rosen 已经升级了一个新版本 v1.2.2,作出了很大的改进. 下载地址 htt ...
随机推荐
- PowerShell 批量修改AD属性
环境:win 2008 R2 在管理工具中打开用于 windows powershell 的ActiveDirectory模块命令行窗口或打开命令提示符窗口输入PowerShell回车再输入impor ...
- 简单了解Hibernate
orm 对象 object 关系relational映射 mppingorm对象关系映射hibernate 框架是什么?很简单 持久化框架 他轻松的封装了jdbc那些繁琐的操作什么是持久化?持久化就 ...
- java继承(一)
虽然说java中的面向对象的概念不多,但是具体的细节还是值得大家学习研究,java中的继承实际上就是子类拥有父类所有的内容(除私有信息外),并对其进行扩展.下面是我的笔记,主要包含以下一些内容点: 构 ...
- Bootstrap记录
左侧 导航下拉: <li class="dropdown"> <a href="#" class="dropdown-toggle& ...
- jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画
地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...
- 用react分页显示数据
去年年底,尝试着用react写个组件化的页面! demo地址 里面有一个list页面弄了一下数据的分页展示 展示一下主要三个组件:父组件listBox.列表组件List.按钮组件PageButton ...
- 【转】构建基于CXF的WebService服务
构建基于CXF的WebService服务 Apache CXF = Celtix+ XFire,开始叫 Apache CeltiXfire,后来更名为 Apache CXF 了,以下简称为 CXF.C ...
- angular 2 animate 笔记
好久没有在这里写点笔记了.时隔已久,angular1 去 angular2 咯 笔记来源:https://angular.cn/docs/ts/latest/guide/animations.html ...
- recyclerview item点击事件
recyclerview早就不陌生了,比起过去传统的listView,样式更多,也较为高效一点,这里整理一下recylerview中item的点击事件. recyclerview和listView不同 ...
- iOS 推送全解析,你不可不知的所有 Tips!
本文旨在对 iOS 推送进行一个完整的剖析,如果你之前对推送一无所知,那么在你认真地阅读了全文后必将变成一个推送老手,你将会对其中的各种细节和原理有充分的理解.以下是 pikacode 使用 iOS ...