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

下载地址

https://github.com/tcrosen/twitter-bootstrap-typeahead

使用环境

  • Twitter Bootstrap 2.0+
  • jQuery 1.7+

页面准备

<link href="/path/to/bootstrap.css" rel="stylesheet">
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/bootstrap-typeahead.js" type="text/javascript"></script>

脚本

$(myElement).typeahead(options);

事件

事件 说明
grepper Filters relevant results from the source.
highlighter Highlights any matching results in the list.
itemSelected 当选中一个项目时的回调函数.

  • item: 选中的 HTML 元素
  • val: *val* 属性的值
  • text: *display* 属性的值
lookup Determines if source is remote or local and initializes the search.
matcher Looks for a match between the query and a source item.
render Renders the list of results.
select Selects an item from the results list.
sorter 排序结果.

初始化参数

名称 类型 默认值 说明
ajax object
{
url: null,
timeout: 300,
method: 'post',
triggerLength: 3,
loadingClass: null,
displayField: null,
preDispatch: null,
preProcess: null
}
The object required to use a remote datasource.
See also: ajax as a string (below)
ajax string null Optionally, a simple URL may be used instead of the AJAX object.
See also: ajax as an object (above)
display string 'name' The object property to match the query against and highlight in the results.
item string '<li><a href="#"></a></li>' The HTML rendering for a result item.
items integer 8 The maximum number of items to show in the results.
menu string '<ul class="typeahead dropdown-menu"></ul>' The HTML rendering for the results list.
source object [] The source to search against.
val string 'id' The object property that is returned when an item is selected.

基本使用

如果使用本地数据的话直接使用 source

var mySource = [{ id: 1, name: 'Terry'}, { id: 2, name: 'Mark'}, { id: 3, name: 'Jacob'}];

$('#myElement').typeahead({
source: mySource
});

如果使用 Ajax 的话,可以直接指定 url,注意,现在的版本要求必须使用对象形式的数据源,默认显示文本为对象的 name 属性,可以通过初始化参数的 display 配置,默认的标识属性为 id ,可以使用 val 进行配置。

$('#myElement').typeahead({
ajax: '/path/to/mySource'
});

使用 Ajax

$(function () {
$('#product_search').typeahead({
ajax: {
url: '@Url.Action("AjaxService")',
timeout: 300, // 延时
method: 'post',
triggerLength: 3, // 输入几个字符之后,开始请求
loadingClass: null, // 加载数据时, 元素使用的样式类
preDispatch: null,        // 发出请求之前,调用的预处理方法
preProcess: null         // Ajax 请求完成之后,调用的后处理方法
},
display: "name", // 默认的对象属性名称为 name 属性
val: "id", // 默认的标识属性名称为 id 属性
items: 8, // 最多显示项目数量
itemSelected: function (item, val, text) { // 当选中一个项目的时候,回调函数
console.info(item);
}
});
});

如果我们需要在请求中,除了递进搜索的参数之外,添加额外的请求参数怎么办呢,可以通过 preDispatch 进行额外处理,需要注意的是,一定要返回一个对象,这个对象将用来使用 jQuery 的 Ajax 方法作为参数。

 $(function () {
$('#product_search').typeahead({
ajax: {
url: '@Url.Action("AjaxService")',
timeout: 300, // 延时
method: 'post',
triggerLength: 3, // 输入几个字符之后,开始请求
loadingClass: null, //
preDispatch: function (query) {
var para = { other: 'xxxxxxxxx' };
para.query = query;
return para;
}, preProcess: function (result) {
return result;
}
},
display: "name", // 默认的对象属性名称为 name 属性
val: "id", // 默认的标识属性名称为 id 属性
items: 8, // 最多显示项目数量
itemSelected: function (item, val, text) { // 当选中一个项目的时候,回调函数
console.info(item);
// console.info($("#product_search").val()); }
});
});

使用升级版的 Bootstrap typeahead v1.2.2的更多相关文章

  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 组件

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

  4. 第五章 使用 Bootstrap Typeahead 组件(百度下拉效果)

    推荐链接:http://www.cnblogs.com/haogj/p/3376874.html UnderScore官网:http://underscorejs.org/ 参考文档:http://w ...

  5. 在 angularjs 中集成 bootstrap typeahead

    问题 在使用 typeahead 的时候,有这样一个需求,当用户选中其中一项的之后,将项目对应的 id 保存到另外一个变量中,以后在提交表单的时候,将这个 id 发送到服务器中. 但是,在 typea ...

  6. 第六章 使用 Bootstrap Typeahead 组件(百度下拉效果)(续)

    官方:http://twitter.github.io/typeahead.js/ 示例:http://twitter.github.io/typeahead.js/examples/(本文展示:Op ...

  7. Bootstrap fileinput v1.0(ssm版)

    前言bootstrap fileinput是一个很好的文件上传插件.但是官方不出api,这就尴尬了.百度一下,每个人写法都不相同,好多代码本身都是错的.我修改后才能跑起来.综上所述:所以今天我摸索了一 ...

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

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

  9. 【Bootstrap】 typeahead自动补全

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

随机推荐

  1. Android退出程序时的"再按一次退出"实现

    android 个人觉得当用户按下后退键时,出现"再按一次退出"的提示防止误操作比弹出一个对话框是会更人性化的.话不多说上代码: 第一种:重写onKeyDown来监听: long  ...

  2. eclipse debug小技巧

    测试 Expressions 代码 public static void main(String[] args) { int x=100; System.out.println("----& ...

  3. 【jmeter】搭建持续集成接口测试平台(Jenkins+Ant+Jmeter)

    一.环境准备: 1.JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.Jmeter:http://jme ...

  4. android学习笔记19——对话框(DatePickerDialog、TimePickerDialog)

    DatePickerDialog.TimePickerDialog ==> DatePickerDialog.TimePickerDialog功能.用法都比较简单,操作步骤: 1.通过new关键 ...

  5. golang rbac框架

    在 https://github.com/mikespook/gorbac/tree/v1.0 github上新的版本是开发板,得用这里的老版 demo package main import ( & ...

  6. [linux basic]--线程

    /************************************************************************* > File Name: thread1.c ...

  7. Zookeeper + Hadoop2.6 集群HA + spark1.6完整搭建与所有参数解析

    废话就不多说了,直接开始啦~ 安装环境变量: 使用linx下的解压软件,解压找到里面的install 或者 ls 运行这个进行安装 yum install gcc yum install gcc-c+ ...

  8. Hadoop MapReduce编程学习

    一直在搞spark,也没时间弄hadoop,不过Hadoop基本的编程我觉得我还是要会吧,看到一篇不错的文章,不过应该应用于hadoop2.0以前,因为代码中有  conf.set("map ...

  9. IGS_学习笔记05_IREP开发Concurrent Program为客户化集合接口(案例)

    20150819 Created By BaoXinjian

  10. 转--Android:TextView属性大全

    android:autoLink 设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/phone/map/all) android ...