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的文档。感觉功能很强大啊。

posted @ 2014-12-15 22:49 Sheldon_Lou 阅读(...) 评论(...) 编辑 收藏