今天遇到了一个很牛逼的插件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. python 多线程就这么简单
			
    原文地址:http://www.cnblogs.com/fnng/p/3670789.html
    
			
    2. 
						
  2. PHP访问MSSQL数据库（实例代码）
			
     本例子只作为简单的引导,实现一个简单的查询: <!DOCTYPE HTML> <html lang="en-US"> <head> <t ...
    
			
    3. 
						
  3. linux文档常见后缀名
			
    echo "Start bakup mdsoss Source code ..."_Name="templatecdr_src_"`date +%Y%m%d%H ...
    
			
    4. 
						
  4. 【9-15】python学习笔记01
			
    使用#开启行注释: 命令行:使用ctrl+d 退出
    
			
    5. 
						
  5. git log --stat常用命令
			
    ​1,显示被修改文件的修改统计信息,添加或删除了多少行. git log --stat 2,显示最近两条的修改 git log --stat -2 3,显示具体的修改 git log -p -2 4, ...
    
			
    6. 
						
  6. array_fill 用给定的值填充数组
			
    转自:http://www.phpstudy.net/php/165.html PHP array_fill 用给定的值填充数组 array_fill (PHP 4 >= 4.2.0, PHP  ...
    
			
    7. 
						
  7. mysql 调用外部程序
			
    一.下载 lib_mysqludf_sys: 下载地址:https://github.com/mysqludf/repositories 二.配置与使用: 1.解压之后,已经有了我们需要的 lib_m ...
    
			
    8. 
						
  8. SWFUpload 2.5.0版 官方说明文档 中文翻译版
			
    原文地址:http://www.cnblogs.com/youring2/archive/2012/07/13/2590010.html#setFileUploadLimit SWFUpload v2 ...
    
			
    9. 
						
  9. 【CISP笔记】安全攻击与防护
			
    公开信息收集-搜索引擎 快速定位Google 搜索“5sf67.jsp”可以找到存在此脚本的Web网站Google 搜索“teweb/default.htm”就可找到开放着远程Web连接的服务器信息挖 ...
    
			
    10. 
						
  10. 密码学初级教程(一）基本概念及DES加密算法
			
    密码技术在网络通信中广泛使用,本节是初步接触密码学技术的笔记. 第1章 加密-解密 破译 明文-密文 密钥 密码算法 对称密码-公钥密码(非对称密码) 单向散列函数-散列值 消息认证码 数字签名 伪随 ...
    
			
    11.