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 //搜索过滤数据前，对输入关键字作进一步处理方法。注意，应返回字符串}; |
浙公网安备 33010602011771号