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

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：选中搜索值的时候触发。