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:

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

Js:

 var localArrayData = ['beijing', 'shanghai', 'guangzhou', 'sz', 'hangzhou', 'ningbo']; 
 
 function parseLocalArrayData() { 
 
             $("#local_data").typeahead({ 
 
                 source: localArrayData,//数据源 
 
                 items: 8,//最多显示个数 
 
                 updater: function (item) { 
 
  return item;//这里一定要return,否则选中不显示,外加调用display的时候null reference错误。 
 
                 }, 
 
                 displayText: function (item) { 
 
  return "选:" + item;//返回字符串 
 
                 }, 
 
                 afterSelect: function (item) { 
 
  //选择项之后的事件 ,item是当前选中的。 
 
                 }, 
 
                 delay: 500//延迟时间 
 
             }); 
 
             $("#look_up_array").click(function () { 
 
                 $("#local_data").typeahead("lookup", '选'); 
 
             }); 
 
             $("#get_value_array").click(function () { 
 
  var val = $("#local_data").typeahead("getActive"); 
 
                 console.log(val); 
 
             }); 
 
         } 
 

Demo2

Html:

 <div class="panel panel-default"> 
 
  <div class="panel-heading"> 
 
  <div class="panel-title">页面js Object数组</div> 
 
  </div> 
 
  <div class="panel-body"> 
 
  <div class="row"> 
 
  <div class="col-md-4"> 
 
  <input id="local_object_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sm form-control" placeholder="请输入(本地Object数据)" /> 
 
  </div> 
 
  <div class="col-md-4"> 
 
  <button class="btn btn-success" id="look_up_object">LookUP</button> 
 
  <button class="btn btn-success" id="get_value_object">GetValue</button> 
 
  </div> 
 
  </div> 
 
  </div> 
 
 </div> 
 

Js:

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

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

Html:

 <div class="panel panel-default"> 
 
  <div class="panel-heading"> 
 
  <div class="panel-title">向服务端获取list object数组 </div> 
 
  </div> 
 
  <div class="panel-body"> 
 
  <div class="row"> 
 
  <div class="col-md-4"> 
 
  <input id="remote_object_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sm form-control" placeholder="请输入 (获取服务器的数据)" /> 
 
  </div> 
 
  <div class="col-md-4"> 
 
  </div> 
 
  </div> 
 
  </div> 
 
 </div> 
 

Js:

 var name2Id = {};//姓名对应的id 
 
 function parseServerObjectArray() { 
 
             $("#remote_object_data").typeahead({ 
 
                 source: function (query, process) { 
 
  //query是输入的值 
 
                     $.post("@Url.Action("GetNames")", { name: query }, function (e) { 
 
  if (e.success) { 
 
  if (e.data.length == 0) { alert("没有查到对应的人"); return; } 
 
  var array = []; 
 
                             $.each(e.data, function (index, ele) { 
 
  name2Id[ele.name] = ele.id;//键值对保存下来。 
 
                                 array.push(ele.name); 
 
                             }); 
 
                             process(array); 
 
                         } 
 
                     }); 
 
                 }, 
 
                 items: 8, 
 
                 afterSelect: function (item) { 
 
                     console.log(name2Id[item]);//打印对应的id 
 
                 }, 
 
                 delay: 500 
 
             }); 
 
         } 
 

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

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

介绍完毕。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cnblogs

Reactor模式的.net版本简单实现--DEMO

     近期在学习DotNetty,遇到不少的问题。由于dotnetty是次netty的.net版本的实现。导致在网上叙述dotnetty的原理,以及实现技巧...

4006
来自专栏Create Sun

access基本操作(c#操作,远程连接,执行sql,加密,备份)

前言  最近项目用到了access,是的就是access,工作在桌面型的小数据库应用还是会用到的,如果你确定永远不会遇到access的操作,请忽略此篇文章 1....

3968
来自专栏dotnet & java

WCF 入门 (17)

首先修改服务端的app.config 配置文件,先使用basicHttpBinding

832
来自专栏大内老A

事件(Event),绝大多数内存泄漏(Memory Leak)的元凶[上篇]

最近这两天一直在忙着为一个项目检查内存泄漏(Memory Leak)的问题,对相关的知识进行了一下简单的学习和探索,其间也有了一些粗浅的经验积累,今天特意写一篇...

2456
来自专栏跟着阿笨一起玩NET

Linq to sql并发与事务

       为了看起来清晰,我已经事先把所有分类为1产品的价格和库存修改为相同值了。然后执行下面的程序:

802
来自专栏Golang语言社区

游戏服务器之内存数据库redis客户端应用(下)

(3)存储一个角色的基础信息(使用命令set) 存储结构: key:BASE角色id ,value 角色基础信息 int playerId = player-...

5498
来自专栏跟着阿笨一起玩NET

一步一步学Linq to sql(七):并发与事务

为了看起来清晰,我已经事先把所有分类为1产品的价格和库存修改为相同值了。然后执行下面的程序:

612
来自专栏程序员与猫

使用HttpClient的优解

新工作入职不久,目前仍然还在适应环境当中,笔者不得不说看别人的源码实在是令人痛苦。所幸前些日子终于将工作流畅地看了一遍,接下来就是熟悉框架技术的阶段了。 也正是...

4338
来自专栏大内老A

如何解决分布式系统中的跨时区问题[原理篇]

《谈谈你最熟悉的System.DateTime[上篇][下篇]》从跨时区的角度对DateTime这个我们熟知的类型进行了深入探讨,它们都是为这篇文章作的准备工作...

1907
来自专栏walterlv - 吕毅的博客

.NET 命令行参数包含应用程序路径吗?

发布于 2018-09-11 13:28 更新于 2018-09...

943

扫码关注云+社区

领取腾讯云代金券