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