今天遇到了一个很牛逼的插件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. AutoMocker单元测试
			
    /// <summary> /// 测试获取所有物流 /// </summary> [TestMethod] public void TestExpressController ...
    
			
    2. 
						
  2. 网络广告术语CPC、CPM和CTR的含义和关系
			
    1.       CPC(Cost-per-click):对于广告主来说,就是每次点击(广告)的(付给网站主的)成本:对于媒体(或网站主)来说,就是用户每次点击(广告)(向广告主收取)的费用.可以用公 ...
    
			
    3. 
						
  3. Python操作Redis、Memcache、RabbitMQ、SQLAlchemy
			
    Python操作 Redis.Memcache.RabbitMQ.SQLAlchemy redis介绍:redis是一个开源的,先进的KEY-VALUE存储,它通常被称为数据结构服务器,因为键可以包含 ...
    
			
    4. 
						
  4. Objective-C 链式语法的实现
			
    对于 Objective-C 的语法,喜欢的人会觉得它是如此的优雅,代码可读性强,接近自然语言,开发者在调用大多数方法时不需要去查看注释或文档,通常只凭借方法名就可以大致知道这个方法的作用,可以理解为 ...
    
			
    5. 
						
  5. html兼容性
			
    IE  property:value\9; //for all IE IE6 _property:value; IE7 *property:value; IE8 +property:value; IE ...
    
			
    6. 
						
  6. root用户自动登录
			
    编辑文件: /etc/gdm/custom.conf的内容: 1 # GDM configuration storage      2       3 [daemon]      4 #GtkModu ...
    
			
    7. 
						
  7. jquery eval解析JSON中的注意点介绍
			
    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式:使用eval()函数.使用Function对象来进行返回解析,下面有个示例,感兴趣的朋友可以参考下   在JS中将JSON的字符串解析 ...
    
			
    8. 
						
  8. Java实现zip压缩多个文件下载
			
    为了更好的演示,首先创建一个文件实体FileBean,包含了文件路径和文件名称: package com.javaweb.entity; import java.io.Serializable; /* ...
    
			
    9. 
						
  9. Shader 之 顶点变形
			
    可以使3D物体通过顶点变形弯曲,常见于跑酷游戏的跑道.可向左.右.上.下弯曲. Shader "Custom/VertexColorCurved" { Properties { / ...
    
			
    10. 
						
  10. QT编写上位机程序一定要初始化变量以及谨慎操作指针
			
    背景: 在编写QT上位机界面时,界面在运行的时候经常出现卡死或者直接挂掉的怪现象. 正文: 上位机有个函数为check_receive():该函数的作用为定时调用循环检测USB是否有数据.若有,则将信 ...
    
			
    11.