今天遇到了一个很牛逼的插件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. valuestack,stackContext,ActionContext.之间的关系以及如何存取数值的
			
      2013-03-15 10:54 1722人阅读 评论(1) 收藏 举报  分类: J2EE 版权声明:本文为博主原创文章,未经博主允许不得转载. 三者之间的关系如下图所示: ActionCont ...
    
			
    2. 
						
  2. DataTable转实体
			
    public class ModelConvertHelper<T> where T : new() { public static IList<T> ConvertToMod ...
    
			
    3. 
						
  3. Unity相关路径
			
    Application.dataPath 只读 在项目根目录下读取文件,但移动端没有访问权限.一般适用于PC端调试用. Application.streamingAssetsPath 在Assets目 ...
    
			
    4. 
						
  4. gspx请求周期（备忘）
			
    
			
    5. 
						
  5. 被拒原因——You have selected the Kids Category for your app, but it does not include the required privacy policy.  Please update your app metadata to include a privacy policy URL and ensure that the URL yo
			
    对于一些孩子类的应用,必须加上隐私政策网址(URL),直接截个图吧! 就是你上架的时候,填写应用信息,里面有一个隐私政策网址(URL),望后者不掉坑里了!!!
    
			
    6. 
						
  6. Hadoop 之面试题
			
    颜色区别: 蓝色:hive,橙色:Hbase.黑色hadoop 请简述hadoop怎样实现二级排序． 你认为用Java,Streaming,pipe 方式开发map/reduce,各有哪些优缺点: 6 ...
    
			
    7. 
						
  7. LoadRunner脚本编写（转）
			
    性能测试工程师要懂代码么?答案是必须的.好多测试员认为在loadrunner中编写脚本很难很牛X ,主要是大多测试人员并未做过开发工作,大学的那点程序基础也忘记的差不多了.还有非计算机专业出身的测试员 ...
    
			
    8. 
						
  8. laravel路由基础
			
    基础: 所有的laravel路由都定义在 app/Http/routes.php 这个文件里,会被框架自带加载.简单的路由会接受一个URI和一个Closure类. Route::get('foo',  ...
    
			
    9. 
						
  9. iOS开发——高级篇——地理定位  CoreLocation
			
    一.CoreLocation 在移动互联网时代,移动app能解决用户的很多生活琐事,比如周边:找餐馆.找KTV.找电影院等等导航:根据用户设定的起点和终点,进行路线规划,并指引用户如何到达 在上述应用 ...
    
			
    10. 
						
  10. iOS开发——UI基础-提示框
			
    提示框的种类有很多,废话不多说,直接上代码 一.文本提示框 运行结果如下: 代码实现如下: @interface ViewController () // 添加方法 - (IBAction)add;  ...
    
			
    11.