JS插件之——bootstrap-suggest.js
今天遇到了一个很牛逼的插件bootstrap-suggest.js 如此好用的搜索提示插件 简直酷毙了
编写了一个例子,供以后参考
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html > 3 <head> 4 <title>1.html</title> 5 6 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 7 <link rel="stylesheet" href="../../js/bootstrap.min.css" /> 8 </head> 9 <body > 10 <h3>下拉框示例</h3> 11 <div class="input-group" style="width:240px;"> 12 <input type="text" class="form-control" id="admdirector" style="width:240px;margin-right:0px"> 13 <div class="input-group-btn" style="width:1px;"> 14 <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul> 15 </div> 16 </div> 17 <script src="../../js/jquery.min.js"></script> 18 <script src="../../js/bootstrap.min.js"></script> 19 <script src="../../js/bootstrap-suggest.js"></script> 20 <script> 21 var admdirector = $("#admdirector").bsSuggest({ 22 indexId: 4, //data.value 的第几个数据,作为input输入框的内容 23 indexKey: 0, //data.value 的第几个数据,作为input输入框的内容 24 allowNoKeyword: false, //是否允许无关键字时请求数据 25 multiWord: false, //以分隔符号分割的多关键字支持 26 separator: ",", //多关键字支持时的分隔符,默认为空格 27 getDataMethod: "url", //获取数据的方式,总是从 URL 获取 28 effectiveFields:["name","ename","departName","jobtitle"], 29 effectiveFieldsAlias:{name: "姓名",ename:"英文名",departName:"部门",jobtitle:"职位"}, 30 showHeader: true, 31 url: '/omss/viewEmpByName?name=', /*优先从url ajax 请求 json 帮助数据,注意最后一个参数为关键字请求参数*/ 32 processData: function(json){// url 获取数据时,对数据的处理,作为 getData 的回调函数 33 var i, len, data = {value: []}; 34 if(!json || json.length == 0) { 35 return false; 36 } 37 len = json.length; 38 for (i = 0; i < len; i++) { 39 data.value.push({ 40 "name": json[i].name, 41 "ename": json[i].ename, 42 "departName":json[i].dep_name, 43 "jobtitle":json[i].jobtitle, 44 "eid":json[i].eid 45 }); 46 } 47 console.log(data); 48 return data; 49 } 50 }); 51 </script> 52 </body> 53 54 </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的后面
展示的效果如下:
配置参数
参数列表中的值均为插件默认值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
var defaultOptions = { url: null , //请求数据的 URL 地址 jsonp: null , //设置此参数名,将开启jsonp功能,否则使用json数据结构 data: { value: [] }, //提示所用的数据,注意格式 indexId: 0, //每组数据的第几个数据,作为input输入框的 data-id,设为 -1 且 idField 为空则不设置此值 indexKey: 0, //每组数据的第几个数据,作为input输入框的内容 idField: '' , //每组数据的哪个字段作为 data-id,优先级高于 indexId 设置(推荐) keyField: '' , //每组数据的哪个字段作为输入框内容,优先级高于 indexKey 设置(推荐) /* 搜索相关 */ autoSelect: true , //键盘向上/下方向键时,是否自动选择值 allowNoKeyword: true , //是否允许无关键字时请求数据 getDataMethod: 'firstByUrl' , //获取数据的方式,url:一直从url请求;data:从 options.data 获取;firstByUrl:第一次从Url获取全部数据,之后从options.data获取 delayUntilKeyup: false , //获取数据的方式 为 firstByUrl 时,是否延迟到有输入时才请求数据 ignorecase: false , //前端搜索匹配时,是否忽略大小写 effectiveFields: [], //有效显示于列表中的字段,非有效字段都会过滤,默认全部。 effectiveFieldsAlias: {}, //有效字段的别名对象,用于 header 的显示 searchFields: [], //有效搜索字段,从前端搜索过滤数据时使用,但不一定显示在列表中。effectiveFields 配置字段也会用于搜索过滤 twoWayMatch: true , // 是否双向匹配搜索。为 true 即输入关键字包含或包含于匹配字段均认为匹配成功,为 false 则输入关键字包含于匹配字段认为匹配成功 multiWord: false , //以分隔符号分割的多关键字支持 separator: ',' , //多关键字支持时的分隔符,默认为半角逗号 /* UI */ autoDropup: false , //选择菜单是否自动判断向上展开。设为 true,则当下拉菜单高度超过窗体,且向上方向不会被窗体覆盖,则选择菜单向上弹出 autoMinWidth: false , //是否自动最小宽度,设为 false 则最小宽度不小于输入框宽度 showHeader: false , //是否显示选择列表的 header。为 true 时,有效字段大于一列则显示表头 showBtn: true , //是否显示下拉按钮 inputBgColor: '' , //输入框背景色,当与容器背景色不同时,可能需要该项的配置 inputWarnColor: 'rgba(255,0,0,.1)' , //输入框内容不是下拉列表选择时的警告色 listStyle: { 'padding-top' : 0, 'max-height' : '375px' , 'max-width' : '800px' , 'overflow' : 'auto' , 'width' : 'auto' , 'transition' : '0.3s' , '-webkit-transition' : '0.3s' , '-moz-transition' : '0.3s' , '-o-transition' : '0.3s' }, //列表的样式控制 listAlign: 'left' , //提示列表对齐位置,left/right/auto listHoverStyle: 'background: #07d; color:#fff' , //提示框列表鼠标悬浮的样式 listHoverCSS: 'jhover' , //提示框列表鼠标悬浮的样式名称 clearable: false , // 是否可清除已输入的内容 /* key */ keyLeft: 37, //向左方向键,不同的操作系统可能会有差别,则自行定义 keyUp: 38, //向上方向键 keyRight: 39, //向右方向键 keyDown: 40, //向下方向键 keyEnter: 13, //回车键 /* methods */ fnProcessData: processData, //格式化数据的方法,返回数据格式参考 data 参数 fnGetData: getData, //获取数据的方法,无特殊需求一般不作设置 fnAdjustAjaxParam: null , //调整 ajax 请求参数方法,用于更多的请求配置需求。如对请求关键字作进一步处理、修改超时时间等 fnPreprocessKeyword: null //搜索过滤数据前,对输入关键字作进一步处理方法。注意,应返回字符串 }; |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
2017-07-27 Microsoft Office Excel 不能访问文件 的解决办法