今天遇到了一个很牛逼的插件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. Effective Objective-C 2.0 — 第14条：理解“类对象“的用意
			
    每个实例都有一个指向Class 对象的指针,用以表明其类型,而这些 Class 对象则构成了类的继承体系. 如果对象类型无法在编译期确定,那么就应该使用类型信息查询方法来探知. 尽量使用类型信息查询方 ...
    
			
    2. 
						
  2. centos 安装 svn-1.9.4
			
    wget http://mirrors.cnnic.cn/apache/subversion/subversion-1.9.4.tar.gzwget http://mirror.bit.edu.cn/ ...
    
			
    3. 
						
  3. Sphinx 之 Coreseek、Sphinx-for-chinaese、Sphinx+Scws 评测
			
    Sphinx是一个基于SQL的全文检索引擎:普遍使用于很多网站:但由于中英文的差异,其本身,对中文的支持并不好.主要体现在对一段话断词:英文只需按照空格对其分词即可:但对于博大精深的中文来说,却是件困 ...
    
			
    4. 
						
  4. kafka C客户端librdkafka producer源码分析
			
    from:http://www.cnblogs.com/xhcqwl/p/3905412.html kafka C客户端librdkafka producer源码分析 简介 kafka网站上提供了C语 ...
    
			
    5. 
						
  5. 几个Web server的HA架构资料
			
    提高Web性能, 最关键还是要看瓶颈在哪里. 手段不外乎下面几个. 实现从易到难一般为: 优化Big SQL -> 引入CDN -> 引入Memcache等缓存 -> Web负载平衡 ...
    
			
    6. 
						
  6. Update-Package : Unable to load the service index for source https://api.nuget.org/v3/index.json.
			
    由于更改了项目"属性"的"目标框架"(原来的框架是".NET Frameword4.5"改为了".NET Frameword4&q ...
    
			
    7. 
						
  7. 关于R中的mode()和class()的区别
			
    本文原创,转载请注明出处,本人Q1273314690(交流学习) 说明:本文曾经在15年11月在CSDN发过,但是由于CSDN不支持为知笔记的发布为博客的API功能,所以,自今天起,转移到博客园(幸好 ...
    
			
    8. 
						
  8. Max Degree of Parallelism最大并行度配置
			
    由于公司的业务在急速增长中,发现数据库服务器已经基本撑不住这么多并发.一方面,要求开发人员调整并发架构,利用缓存减少查询.一方面从数据库方面改善并发.数据库的并行度可设置如下: 1)cost thre ...
    
			
    9. 
						
  9. jquery datagrid加载后仅选定第一行
			
    function onLoadSuccess(data) { var rows = $("#DataGrid").datagrid("getRows"); if ...
    
			
    10. 
						
  10. PHP基础文件下载类的简单封装
			
    1: <?php 2: /** 3: * [FileDown 公用文件下载方法] 4: * @param [type] $filePath [文件路径(绝对路径或相对路径)] 5: */ 6:  ...
    
			
    11.