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的文檔。感覺功能很強大啊。