今天遇到了一个很牛逼的插件bootstrap-suggest.js 如此好用的搜索提示插件 简直酷毙了

源码下载地址

编写了一个例子，供以后参考

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html >

   <head>

     <title>1.html</title>

     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <link rel="stylesheet" href="../../js/bootstrap.min.css" />

   </head>

 <body >

 <h3>下拉框示例</h3>

 <div class="input-group" style="width:240px;">

     <input type="text" class="form-control" id="admdirector" style="width:240px;margin-right:0px">

     <div class="input-group-btn" style="width:1px;">

         <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>

     </div>

 </div>

     <script src="../../js/jquery.min.js"></script>

     <script src="../../js/bootstrap.min.js"></script>

     <script src="../../js/bootstrap-suggest.js"></script>

     <script>

         var admdirector = $("#admdirector").bsSuggest({

                 indexId: 4, //data.value 的第几个数据，作为input输入框的内容

                 indexKey: 0, //data.value 的第几个数据，作为input输入框的内容

                 allowNoKeyword: false, //是否允许无关键字时请求数据

                 multiWord: false, //以分隔符号分割的多关键字支持

                 separator: ",", //多关键字支持时的分隔符，默认为空格

                 getDataMethod: "url", //获取数据的方式，总是从 URL 获取

                 effectiveFields:["name","ename","departName","jobtitle"],

                 effectiveFieldsAlias:{name: "姓名",ename:"英文名",departName:"部门",jobtitle:"职位"},

                 showHeader: true,

                 url: '/omss/viewEmpByName?name=', /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/

                 processData: function(json){// url 获取数据时，对数据的处理，作为 getData 的回调函数

                     var i, len, data = {value: []};

                     if(!json || json.length == 0) {

                         return false;

                     }

                     len = json.length;

                     for (i = 0; i < len; i++) {

                         data.value.push({

                             "name": json[i].name,

                             "ename": json[i].ename,

                             "departName":json[i].dep_name,

                             "jobtitle":json[i].jobtitle,

                             "eid":json[i].eid

                         });

                     }

                     console.log(data);

                     return data;

                 }

             });

     </script>

 </body>

 </html>

注意：

【1】包含了一个css文件、三个js文件、和一段插件初始化代码

<link rel="stylesheet" href="../../js/bootstrap.min.css" />  
<script src="../../js/jquery.min.js"></script>

<script src="../../js/bootstrap.min.js"></script>

<script src="../../js/bootstrap-suggest.js"></script>

【2】JS文件一定要跟在div的后面

展示的效果如下：

												


											
JS插件之——bootstrap-suggest.js的更多相关文章
	

    
						
  1. bootstrap插件学习-bootstrap.popover.js
		
    先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} ...
    
		
    2. 
						
  2. bootstrap插件学习-bootstrap.dropdown.js
		
    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
    
		
    3. 
						
  3. bootstrap插件学习-bootstrap.modal.js
		
    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
    
		
    4. 
						
  4. bootstrap插件学习-bootstrap.typehead.js
		
    先看bootstrap.typehead.js的结构 var Typeahead = function ( element, options ){} //构造器 Typeahead.prototype ...
    
		
    5. 
						
  5. bootstrap插件学习-bootstrap.carousel.js
		
    先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = { ...
    
		
    6. 
						
  6. bootstrap插件学习-bootstrap.collapse.js
		
    先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype  ...
    
		
    7. 
						
  7. bootstrap插件学习-bootstrap.alert.js
		
    我们先看bootstrap.alert.js的结构 var dismiss = '[data-dismiss="alert"]' //自定义属性 Alert = function  ...
    
		
    8. 
						
  8. bootstrap插件学习-bootstrap.button.js
		
    先看bootstrap.button.js的结构 var Button = function ( element, options ){} //构造器 Button.prototype = {} // ...
    
		
    9. 
						
  9. bootstrap插件学习-bootstrap.scrollspy.js
		
    先看bootstrap.dropdown.js的结构 function ScrollSpy(){} //构造函数 ScrollSpy.prototype = {} //构造器的原型 $.fn.scro ...
    
		
    10. 
						
  10. js插件库+bootstrap
		
    1.Chart.js 官网地址:http://chartjs.cn/ 2.优秀的bootstrap模板推荐 官网地址:http://bootswatch.com 3.wow+animate+js插件库 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. maven可选依赖（Optional Dependencies）和依赖排除（Dependency Exclusions）
			
    我们知道,maven的依赖关系是有传递性的.如:A-->B,B-->C.但有时候,项目A可能不是必需依赖C,因此需要在项目A中排除对A的依赖.在maven的依赖管理中,有两种方式可以对依赖 ...
    
			
    2. 
						
  2. 关于VS打开cshtml出现 未能完成该操作。无效指针
			
    关于VS打开cshtml出现 未能完成该操作.无效指针 第一步:关闭VS 第二部:删除%LocalAppData%\Microsoft\VisualStudio\14.0\ComponentModel ...
    
			
    3. 
						
  3. webpack 前端构建
			
    一.建立简单的项目目录 1.创建 manager 根目录(作为项目根目录)2.执行 npm init,在根目录manager下自动生成 package.json文件3.npm install webp ...
    
			
    4. 
						
  4. 【转载】Unity 合理安排增量更新（热更新）
			
    原帖地址:由于我看到的那个网站发的这篇帖子很大可能是盗贴的,我就暂时不贴地址了.避免伤害原作者 原版写的有点乱,我个人修改整理了下. --------------------------------- ...
    
			
    5. 
						
  5. 找不到类型“{x}.{x}”，它在 ServiceHost 指令中提供为 Service 特性值，或在配置元素 system.serviceModel/serviceHostingEnvironment/serviceActivations 中提供。
			
    最近在搞一个WCF的项目... 刚开始在这条路上走... 各种崎岖... 网上搜到的一种解决方案(也是大多数情况的解决方案): 原文:http://www.cnblogs.com/Olive116/p ...
    
			
    6. 
						
  6. glusterFS的常用命令 （转）
			
    1.       启动/关闭/查看glusterd服务 # /etc/init.d/glusterd start # /etc/init.d/glusterd stop # /etc/init.d/g ...
    
			
    7. 
						
  7. VC++ 6.0使用定时器SetTimer;
			
    背景: windows中使用VC++6.0制作了个交互界面向下位机定时发送数据及显示下位机上传的数据.定时发送则需要使用定时器. 本文只做记录如何调用,原理以后再深究. 正文: 首先,我生成的窗体类名 ...
    
			
    8. 
						
  8. JSON格式转换(javascript)
			
    使用ajax从后台抓取数据后,如果有多个值,可以使用json传值. ajax例子如下,在返回的类型里面,可以是文本型(text),JSON格式(json),超文本类型(html),XML文件类型(xm ...
    
			
    9. 
						
  9. Mongodb——GridFS
			
    GridFS用于存储和恢复那些超过16M(BSON文件限制)的文件. GridFS将文件分成大块,将每个大块存储为单独的文件.GridFS中限制chunk最大为256k.GridFS使用两个colle ...
    
			
    10. 
						
  10. SQL Server 跨数据库查询
			
    语句 SELECT * FROM 数据库A.dbo.表A a, 数据库B.dbo.表B b WHERE a.field=b.field "DBO"可以省略 如 SELECT * F ...
    
			
    11.