Bootstrap-3-Typeahead

是Bootstrap-3-Typeahead，不是Twitter open source的typeahead，两者用法有差异。外加如果配合原生的Bootstrap3 的话推荐还是用这个。（当然Twitter open source也有个bootstrap）。

感觉这个简单功能够用了。

现在公司的项目中后台管理界面都开始用bootstrap 3 了，界面高大尚了很多，程序员就算不太会css也不用担心做的界面太丑了。

项目中要实现Jquery UI的autocomplete控件的功能，谷歌了一下，发现有个Typeahead， 写了几个demo，感觉功能还是挺不错的，记录分享一下。

常用参数说明

1. source：是个function或者 基本类型的数组。
2. items :下拉选项展示的个数
3. afterSelect：选中之后执行的回调函数。

首先，当然是引用js文件。

<script src="~/Scripts/bootstrap3-typeahead.js"></script>

Demo1

Html：

1. <div class="panel panel-default">
2.     <div class="panel-heading">
3.         <div class="panel-title">页面js 普通</div>
4.     </div>
5.     <div class="panel-body">
6.         <div class="row">
7.             <div class="col-md-4">
8.                 @* autocomplete 避免浏览器的自动提示对下拉选项的覆盖操作 *@
9.                 <input id="local_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sm form-control" placeholder="请输入(本地Array数据)" />
10.             </div>
11.             <div class="col-md-4">
12.                 <button class="btn btn-success" id="look_up_array">LookUp</button>
13.                 <button class="btn btn-success" id="get_value_array">GetValue</button>
14.             </div>
15.         </div>
16.     </div>
17. </div>

Js：

1. var localArrayData = ['beijing', 'shanghai', 'guangzhou', 'sz', 'hangzhou', 'ningbo'];
2. function parseLocalArrayData() {
3.             $("#local_data").typeahead({
4.                 source: localArrayData,//数据源
5.                 items: 8,//最多显示个数
6.                 updater: function (item) {
7.                     return item;//这里一定要return，否则选中不显示，外加调用display的时候null reference错误。
8.                 },
9.                 displayText: function (item) {
10.                     return "选：" + item;//返回字符串
11.                 },
12.                 afterSelect: function (item) {
13.                     //选择项之后的事件 ，item是当前选中的。
14.                 },
15.                 delay: 500//延迟时间
16.             });
17.             $("#look_up_array").click(function () {
18.                 $("#local_data").typeahead("lookup", '选');
19.             });
20.             $("#get_value_array").click(function () {
21.                 var val = $("#local_data").typeahead("getActive");
22.                 console.log(val);
23.             });
24.         }

Demo2

Html:

1. <div class="panel panel-default">
2.     <div class="panel-heading">
3.         <div class="panel-title">页面js Object数组</div>
4.     </div>
5.     <div class="panel-body">
6.         <div class="row">
7.             <div class="col-md-4">
8.                 <input id="local_object_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sm form-control" placeholder="请输入（本地Object数据）" />
9.             </div>
10.             <div class="col-md-4">
11.                 <button class="btn btn-success" id="look_up_object">LookUP</button>
12.                 <button class="btn btn-success" id="get_value_object">GetValue</button>
13.             </div>
14.         </div>
15.     </div>
16. </div>

Js:

1. var localObjectData = [{ id: 1, name: 'beijing' }, { id: 2, name: 'shanghai' }, { id: 3, name: 'guangzhou' }, { id: 4, name: 'sz' }];
2. var objMap = {};
3. function parseLocalObjectData() {
4.             //typeahead只能处理简单的列表，所以要构造一个array string。名称对应的id放到objMap里面；
5.             $("#local_object_data").typeahead({
6.                 source: function (query, process) {
7.                     var names = [];
8.                     $.each(localObjectData, function (index, ele) {
9.                         objMap[ele.name] = ele.id;
10.                         names.push(ele.name);
11.                     });
12.                     process(names);//调用处理函数，格式化
13.                 },
14.                 afterSelect: function (item) {
15.                     console.log(objMap[item]);//取出选中项的值
16.                 }
17.             });
18.         }

Demo3 异步调用服务器数据，delay参数就很有用了。

Html:

1. <div class="panel panel-default">
2.     <div class="panel-heading">
3.         <div class="panel-title">向服务端获取list object数组 </div>
4.     </div>
5.     <div class="panel-body">
6.         <div class="row">
7.             <div class="col-md-4">
8.                 <input id="remote_object_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sm form-control" placeholder="请输入 （获取服务器的数据）" />
9.             </div>
10.             <div class="col-md-4">
11.             </div>
12.         </div>
13.     </div>
14. </div>

Js:

1. var name2Id = {};//姓名对应的id
2. function parseServerObjectArray() {
3.             $("#remote_object_data").typeahead({
4.                 source: function (query, process) {
5.                     //query是输入的值
6.                     $.post("@Url.Action("GetNames")", { name: query }, function (e) {
7.                         if (e.success) {
8.                             if (e.data.length == 0) { alert("没有查到对应的人"); return; }
9.                             var array = [];
10.                             $.each(e.data, function (index, ele) {
11.                                 name2Id[ele.name] = ele.id;//键值对保存下来。
12.                                 array.push(ele.name);
13.                             });
14.                             process(array);
15.                         }
16.                     });
17.                 },
18.                 items: 8,
19.                 afterSelect: function (item) {
20.                     console.log(name2Id[item]);//打印对应的id
21.                 },
22.                 delay: 500
23.             });
24.         }

Cs: mvc 的action，post提交，返回json

1. [HttpPost]
2.         public JsonResult GetNames(string name)
3.         {
4.             try {
5.                 var rst = db.People
6.                     .Where(w => (w.FirstName + w.LastName).Contains(name))
7.                     .ToList()
8.                     .Select(w => new { id = w.PersonID, name = String.Format("{0}-{1}", w.FirstName, w.LastName) });
9.                 return Json(new { success = true, data = rst });
10.             } catch(Exception ex) { return Json(new { success = false, msg = ex.Message }); }
11.         }

介绍完毕。

过两天再整理一个datatables的文档。感觉功能很强大啊。