注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天朝布衣田中码农参上

苦逼码农的点点滴滴,请多多指教!

 
 
 

日志

 
 
 
 

bootstrap combox搜索建议插件  

2017-04-19 15:11:54|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
最近这个很火,在很多项目中都用到了这个插件,让网页对用户的友好度大升。跟交互大师只差一步,也许就是因为缺少使用了这个插件。另外说明下,这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件,这个插件必须使用于按钮式下拉菜单组件上。浏览器支持包括ie8+,chrome,firefox,safari,
什么叫下拉菜单组件?看下图就明白了:
bootstrap combox搜索建议插件 - sinsunson - 天朝布衣田中码农参上
不多说了,直接开门见山,这插件官网地址:https://github.com/lzwme/bootstrap-suggest-plugin,去下载。然后就可以开始我们的大师之旅了。
1)引入 jQuery、bootstrap.min.css、bootstrap.min.jsbootstrap-suggest.min.js

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-suggest.min.js"></script>

2)接下来就是配置一个下拉输入框了。

<div style="width:500px;margin:0 auto;">
<h2>bootstrap combox 搜索建议插件</h2>
<div class="input-group">
<input type="text" class="form-control" id="test">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
</div>
</div>
</div>

然后整体页面的效果就是如下:
bootstrap combox搜索建议插件 - sinsunson - 天朝布衣田中码农参上
3)接下来就是要用js来配置下。

<script>
//数据例子
var sitelist = {"value":[{"id":"1","NAME":"593668.com"},{"id":"2","NAME":"237h.com"}]};
$("#test").bsSuggest({
indexId: 0, //指定数据的第几个数据,作为input输入框的 data-id
indexKey: 1, //指定数据的第几个数据,作为input输入框的内容
data: sitelist
});
</script>

4)这样就可以直接使用了。
bootstrap combox搜索建议插件 - sinsunson - 天朝布衣田中码农参上
 
 5)当然这是最简单的应用,如果需要配合URL使用,那么就不用data参数,改为URL参数。

url: 'http://www.593668.com/data.json'

这里要说明下,使用的是AJAX,所以不可以跨域名,url返回的也必须是json格式,且遵从规范【必须包含value数组,数组内元素可自定义】。
6)也可以直接配置data。

data: {"value":[{"id":"1","NAME":"593668.com"},{"id":"2","NAME":"237h.com"}]}

7)更多的参数说明可以参考如下:

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: ',', //多关键字支持时的分隔符,默认为半角逗号
delay: 300, //搜索触发的延时时间间隔,单位毫秒

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

如果还需要更多的样例,请自行前往察看官方DEMO:http://lzw.me/pages/demo/bootstrap-suggest-plugin/demo/。
  评论这张
 
阅读(2)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017