twitter-bootstrap-typeahead文本框搜索提醒组件

来源：互联网发布：windows安装光盘多少钱编辑：程序博客网时间：2024/05/19 19:16

twitter-bootstrap-typeahead是一款非常实用，功能强大并且容易上手的一款组件，废话不多说，进入正题！

1、源码地址

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

2、效果展示

3、代码示例

所需引入的Js和css

    <link href="css/bootstrap.css" rel="stylesheet" />    <link href="css/prettify.css" rel="stylesheet" />    <script src="js/jquery-1.11.3.js"></script>    <script src="js/bootstrap.js"></script>    <script src="js/bootstrap-typeahead.js"></script>

初始化

<div class="alert alert-block alert-success" >   <span id="x"></span>    </div><input type='text' class="form-control" id="txt_man" />


本地数据源
<script type="text/javascript">$(function () {            $("#txt_man").typeahead({                source: [                { key: 1, value: 'Toronto' },                { key: 2, value: 'Montreal' },                { key: 3, value: 'New York' },                { key: 4, value: 'Buffalo' },                { key: 5, value: 'Boston' },                { key: 6, value: 'Columbus' },                { key: 7, value: 'Dallas' },                { key: 8, value: 'Vancouver' },                { key: 9, value: 'Seattle' },                { key: 10, value: 'Los Angeles' }                ],                display: "value",                val:"key",                itemSelected: function (item, val, text) {                $('#x').append("你选择的是："+text);                }            });        });</script>

常用属性：
display：显示的字段名称
val：实际的值
items：搜索结果默认展示的个数。默认值为8
source：本地数据源，格式为数组。
ajax：ajax请求的对象，可以直接为一个string的url，也可是object对象。如果是object对象，url这个就不说了，triggerLength的属性表示输入几个字符触发搜索。
常用事件：
itemSelected：选中搜索值的时候触发。

阅读全文

0 0