官方文档: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自动补充的更多相关文章

  1. bootstrap - typeahead自动补全插件

    $('#Sale').typeahead({ ajax: { url: '@Url.Action("../Contract/GetSale")', //timeout: 300, ...

  2. Bootstrap Typeahead/Jquery autocomplete自动补全

    使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...

  3. 【Bootstrap】 typeahead自动补全

    typeahead 这篇文章记录了我在使用typeahead的一些问题,不是很全,但是基本够用. Bootstrap提供typeahead组件来完成自动补全功能. 两种用法: 直接给标签添加属性 &l ...

  4. C++Builder 代码编辑器 回车自动补充括弧

    两大问题 括弧和折叠 一.括弧 XE7,回车,自动补充括弧} 好用,有时候不准确,代码量多,不知道什么原因就引起错误,总是多一个括弧,一回车就加一个括弧,都不敢回车写代码了,怎么关闭此选项? 找到了, ...

  5. CentOS 笔记(六) 历史命令 自动补充

    history #出现历史的命令 #执行具体的一条历史命令 !458 ②安装自动补充功能 yum install -y bash-completion #输入命令 按Tab 会显示所有内容 syste ...

  6. 通过rng-tools自动补充熵池

    通过rng-tools自动补充熵池原文 https://blog.csdn.net/tiantao2012/article/details/78792046首先查看系统当前熵池的大小# cat /pr ...

  7. 使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。

    示例代码: <input type="text" id="addr"/> <input type="text" hidde ...

  8. 使用 Bootstrap Typeahead 组件

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...

  9. 使用升级版的 Bootstrap typeahead v1.2.2

    上次介绍了 Bootstrap 2 中附带的 typeahead,功能强大,但是使用起来不太方便,作者 Terry Rosen 已经升级了一个新版本 v1.2.2,作出了很大的改进. 下载地址 htt ...

随机推荐

  1. excel表格的特殊需求引发的Java思考

    前言: 前些天遇到了这样的一个需求,将下图: 将表格中货号-前面部分一致的行合成一行,并且将第二行,第三行的价格添加到第一行中为价格二,价格三.如图: 接到这样的需求,我的第一感觉是直接手动合并(暗暗 ...

  2. CentOS 6.5安装jdk1.8

    1.源码包准备: 首先到官网下载jdk-8u66-linux-x64.tar.gz, http://www.oracle.com/technetwork/java/javase/downloads/j ...

  3. ORACLE-EXP和IMP方法介绍

    说明: 之前经常有人询问数据库导出导入的方法,去百度查询,但是查询的结果却不是很尽如人意,所以在此做个基本的总结,包括 导出:(导出用户,导出表,导出表结构不带数据,QUERY参数),导入(导入数据文 ...

  4. Animate自定义动画

    在jQuery中出了基本的动画之外,还有用户 可以自定义的函数,Animate() 用于创建自定义动画的函数. apI上指出: 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表 ...

  5. 关于rem的使用和less编译工具考拉

    前提: 1.使用rem的前提是首先要设置好页面的根节点的大小: <script> (function(){ var html = document.documentElement; var ...

  6. Ansible详解(二)

    Ansible系列命令 Ansible系列命令有如下: ansible:这个命令是日常工作中使用率非常高的命令之一,主要用于临时一次性操作: ansible-doc:是Ansible模块文档说明,针对 ...

  7. Spark集群搭建_Standalone

    2017年3月1日, 星期三 Spark集群搭建_Standalone Driver:    node1    Worker:  node2    Worker:  node3 1.下载安装 下载地址 ...

  8. 【JSON学习之道】js操作JSON

    JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON ...

  9. echarts动态添加数据(饼图为例)

    $.ajax({type : "POST",async : false,url : '${ctx}/basic/bsAllPictureGuarantee/pictJson',da ...

  10. Android Http请求头与响应头的学习

    本节引言: 上节中我们对Android涉及的网络编程进行了了解,也学习了下Http的基本概念,而本节我们 要学习的是Http的请求头与响应头,当然,可以把也可以把这节看作文档,用到的时候来查查 即可! ...