区块链遇上小程序_基于bootstrap按钮式下拉菜单组件的查找建议插件

  • 栏目:行业动态 时间:2021-01-12 12:43 分享新闻到:
<返回列表

基于bootstrap按钮式下拉菜单组件的搜索建议插件       这篇文章主要为大家详细介绍了基于bootstrap按钮式下拉菜单组件的搜索建议插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Bootstrap Search Suggest搜索建议插件的具体代码,供大家参考,具体内容如下

 !DOCTYPE html 
 html lang="" 
 head 
 meta charset="utf-8" 
 title Bootstrap 搜索建议插件 /title 
 meta name="viewport" content="width=device-width, initial-scale=1.0" 
 meta name="description" content="这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件" 
 meta name="Keywords" content="Bootstrap Search Suggest,bootstrap,搜索建议插件"/ 
 meta name="author" content="lizhiwen" 
 link href="bootstrap/3.2.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" 
 /head 
 body 
 div 
 box 搜索建议插件 /h2 
 p 这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件. /p 
  /a a href="lzwme/bootstrap-suggest-plugin" rel="external nofollow" target="_blank" Github /a /p 
 form action="index_submit" method="get" accept-charset="utf-8" role="form" 
 h3 测试(URL 获取) /h3 
 p 配置了 data-id,非下拉菜单选择输入则背景色警告。 /p 
 div 
 div 
 div 
 input type="text" id="test" 
 div 
 button type="button" data-toggle="dropdown" 
 span /span 
 /button 
 ul role="menu" 
 /ul 
 /div 
 !-- /btn-group -- 
 /div 
 /div 
 /div 
 h3 测试(URL 获取) /h3 
 p 不展示下拉菜单按钮。 /p 
 div 
 div 
 div 
 input type="text" id="testNoBtn" 
 div 
 button type="button" data-toggle="dropdown" 
 span /span 
 /button 
 ul role="menu" 
 /ul 
 /div 
 !-- /btn-group -- 
 /div 
 /div 
 /div 
 h3 测试(json 数据中获取) /h3 
 p 默认启用空关键字检索。 /p 
 div 
 div 
 div 
 input type="text" id="test_data" 
 div 
 button type="button" data-toggle="dropdown" 
 span /span 
 /button 
 ul role="menu" 
 /ul 
 /div 
 !-- /btn-group -- 
 /div 
 /div 
 /div 
 h3 百度搜索 /h3 
 p 支持逗号分隔多关键字 /p 
 div 
 div 
 div 
 input type="text" id="baidu" 
 div 
 button type="button" data-toggle="dropdown" 
 span /span 
 /button 
 ul role="menu" 
 /ul 
 /div 
 !-- /btn-group -- 
 /div 
 /div 
 /div 
 h3 淘宝搜索 /h3 
 p 支持逗号分隔多关键字 /p 
 div 
 div 
 div 
 input type="text" id="taobao" 
 div 
 button type="button" data-toggle="dropdown" 
 span /span 
 /button 
 ul role="menu" 
 /ul 
 /div 
 !-- /btn-group -- 
 /div 
 /div 
 /div 
 /form 
 /div 
 script src="jquery/1.11.1/jquery.min.js" /script 
 script src="bootstrap/3.2.0/js/bootstrap.min.js" /script 
 script src="bootstrap-suggest.js" /script 
 script type="text/javascript" 
 var testBsSuggest = $("#test").bsSuggest({ 
 //url: "/rest/sys/getuserlist keyword=", 
 url: "data.json", 
 /*effectiveFields: ["userName", "ount"], 
 searchFields: [ "ount"], 
 effectiveFieldsAlias:{userName: "姓名"},*/ 
 idField: "userId", 
 keyField: "userName" 
 }).on('ess', function (e, result) { 
 console.log('ess: ', result); 
 }).on('onSetSelectValue', function (e, keyword) { 
 console.log('onSetSelectValue: ', keyword); 
 }).on('onUnsetSelectValue', function (e) { 
 console.log("onUnsetSelectValue"); 
 }); 
 /** 
 * 不显示下拉按钮 
 var testBsSuggest = $("#testNoBtn").bsSuggest({ 
 //url: "/rest/sys/getuserlist keyword=", 
 url: "data.json", 
 /*effectiveFields: ["userName", "ount"], 
 searchFields: [ "ount"], 
 effectiveFieldsAlias:{userName: "姓名"},*/ 
 showBtn: false, 
 idField: "userId", 
 keyField: "userName" 
 }).on('ess', function (e, result) { 
 console.log('ess: ', result); 
 }).on('onSetSelectValue', function (e, keyword) { 
 console.log('onSetSelectValue: ', keyword); 
 }).on('onUnsetSelectValue', function (e) { 
 console.log("onUnsetSelectValue"); 
 }); 
 /** 
 * 从 data参数中过滤数据 
 var testdataBsSuggest = $("#test_data").bsSuggest({ 
 indexId: 2, //data.value 的第几个数据,作为input输入框的内容 
 indexKey: 1, //data.value 的第几个数据,作为input输入框的内容 
 data: { 
 'value':[ 
 {'id':'0','word':'lzw','description':'/w.lzw.me'}, 
 {'id':'2','word':'meizu','description':'/'} 
 'defaults':'** 
 * 百度搜索 API 测试 
 var baiduBsSuggest = $("#baidu").bsSuggest({ 
 allowNoKeyword: false, //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求 
 multiWord: true, //以分隔符号分割的多关键字支持 
 separator: ",", //多关键字支持时的分隔符,默认为空格 
 getDataMethod: "url", //获取数据的方式,总是从 URL 获取 
 url: 'su p=3 t='+ (new Date()).getTime() +' wd=', /*优先从url ajax 请求 json 帮助数据,注意最后一个参数为关键字请求参数*/ 
 jsonp: 'cb', //如果从 url 获取数据,并且需要跨域,则该参数必须设置 
 processData: function (json) { // url 获取数据时,对数据的处理,作为 getData 的回调函数 
 var i, len, data = {value: []}; 
 if (!json || !json.s || json.s.length === 0) { 
 return false; 
 console.log(json); 
 len = json.s.length; 
 jsonStr = "{'value':["; 
 for (i = 0; i len; i++) { 
 data.value.push({ 
 word: json.s[i] 
 }); 
 data.defaults = 'baidu'; 
 //字符串转化为 js 对象 
 return data; 
 }); 
 /** 
 * 淘宝搜索 API 测试 
 var taobaoBsSuggest = $("#taobao").bsSuggest({ 
 indexId: 2, //data.value 的第几个数据,作为input输入框的内容 
 indexKey: 1, //data.value 的第几个数据,作为input输入框的内容 
 allowNoKeyword: false, //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求 
 multiWord: true, //以分隔符号分割的多关键字支持 
 separator: ",", //多关键字支持时的分隔符,默认为空格 
 getDataMethod: "url", //获取数据的方式,总是从 URL 获取 
 showHeader: true, //显示多个字段的表头 
 effectiveFieldsAlias:{Id: "序号", Keyword: "关键字", Count: "数量"}, 
 url: 'sug code=utf-8 extras=1 q=', /*优先从url ajax 请求 json 帮助数据,注意最后一个参数为关键字请求参数*/ 
 jsonp: 'callback', //如果从 url 获取数据,并且需要跨域,则该参数必须设置 
 processData: function(json){ // url 获取数据时,对数据的处理,作为 getData 的回调函数 
 var i, len, data = {value: []}; 
 if(!json || !json.result || json.result.length == 0) { 
 return false; 
 console.log(json); 
 len = json.result.length; 
 for (i = 0; i len; i++) { 
 data.value.push({ 
 "Id": (i + 1), 
 "Keyword": json.result[i][0], 
 "Count": json.result[i][1] 
 }); 
 console.log(data); 
 return data; 
 }); 
 $("form").submit(function(e) { 
 return false; 
 }); 
 /script 
 /body 
 /html 

配置参数

参数列表中的值均为插件默认值

 url: null, //请求数据的 URL 地址
 jsonp: null, //设置此参数名,将开启jsonp功能,否则使用json数据结构
 data: {}, //提示所用的数据
 getDataMethod: "firstByUrl", //获取数据的方式,url:一直从url请求;data:从 options.data 获取;firstByUrl:第一次从Url获取全部数据,之后从options.data获取
 indexId: 0, //每组数据的第几个数据,作为input输入框的 data-id,设为 -1 且 idField 为空则不设置此值
 indexKey: 0, //每组数据的第几个数据,作为input输入框的内容
 idField: "", //每组数据的哪个字段作为 data-id,优先级高于 indexId 设置(推荐)
 keyField: "", //每组数据的哪个字段作为输入框内容,优先级高于 indexKey 设置(推荐)
 effectiveFields: [], //有效显示于列表中的字段,非有效字段都会过滤,默认全部,对自定义getData方法无效
 effectiveFieldsAlias: {}, //有效字段的别名对象,用于 header 的显示
 searchFields: [], //有效搜索字段,从前端搜索过滤数据时使用。effectiveFields 配置字段也会用于搜索过滤
 showHeader: false, //是否显示选择列表的 header,默认有效字段大于一列时显示,否则不显示
 showBtn: true, //是否显示下拉按钮
 allowNoKeyword: true, //是否允许无关键字时请求数据
 multiWord: false, //以分隔符号分割的多关键字支持
 separator: ",", //多关键字支持时的分隔符,默认为半角逗号
 processData: processData, //格式化数据的方法,返回数据格式参考 data 参数
 getData: getData, //获取数据的方法
 autoMinWidth: false, //是否自动最小宽度,设为 false 则最小宽度不小于输入框宽度
 listAlign: "left", //提示列表对齐位置,left/right/auto
 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"
 }, //列表的样式控制
 listHoverStyle: 'background: #07d; color:#fff', //提示框列表鼠标悬浮的样式
 listHoverCSS: "jhover", //提示框列表鼠标悬浮的样式名称
 keyLeft: 37, //向左方向键
 keyUp: 38, //向上方向键
 keyRight: 39, //向右方向键
 keyDown: 40, //向下方向键
 keyEnter: 13 //回车键
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

区块链遇上小程序_基于bootstrap按钮式下拉

行业动态 2021-01-12
根据bootstrap按键式往下拉莱单部件的检索提议软件 本文关键为大伙儿详尽详细介绍了根...
查看全文

h5建网站企业-绵阳点餐微信小程序开发功

行业动态 2021-01-12
免责协议: 凡标明来源于本网的全部著作,均为本网合理合法有着著作权或有权利应用的著作...
查看全文

广州凡科互联网科技股份有限公司招聘销

行业动态 2021-01-12
招聘人数:5职位信息岗位职责:协助部门经理完成部门销售任务收集潜在***,并作首轮了解及...
查看全文
返回全部新闻


区域站点: 南丰县建站培训   南宫市建站程序   囊谦县凡科建站   南和县企业建站   南华县建站培训   南江县建站程序   南京市凡科建站   南靖县企业建站   南康市建站培训   南乐县建站程序   南陵县凡科建站   南宁市企业建站   南平市建站培训   南皮县建站程序   南市区凡科建站   南通市企业建站   南投县建站培训   南雄市建站程序   南溪县凡科建站   南阳市企业建站   南漳县建站培训   南召县建站程序   南郑县凡科建站   那坡县企业建站   那曲县建站培训   纳雍县建站程序   讷河市凡科建站   内黄县企业建站   内江市建站培训   内丘县建站程序   内乡县凡科建站   嫩江市企业建站   聂荣县建站培训   尼玛县建站程序   尼木县凡科建站   宁安市企业建站   宁波市建站培训   宁城县建站程序   宁德市凡科建站   宁都县企业建站   宁国市建站培训   宁海县建站程序   宁化县凡科建站   宁晋县企业建站   宁陵县建站培训   宁明县建站程序   宁南县凡科建站   宁强县企业建站   宁陕县建站培训   宁武县建站程序   宁乡市凡科建站   宁阳县企业建站   宁远县建站培训   农安县建站程序   磐安县凡科建站   盘锦市企业建站   盘山县建站培训   磐石市建站程序   盘州市凡科建站   蓬安县企业建站   澎湖县建站培训   蓬莱市建站程序   彭山县凡科建站   蓬溪县企业建站   彭阳县建站培训   彭泽县建站程序   彭州市凡科建站   偏关县企业建站   平安县建站培训   平昌县建站程序   平定县凡科建站   屏东县企业建站   平度市建站培训   平果县建站程序   平和县凡科建站   平湖市企业建站   平江县建站培训   平乐县建站程序   平凉市凡科建站   平利县企业建站   平罗县建站培训   平陆县建站程序   屏南县凡科建站   平泉市企业建站   屏山县建站培训   平顺县建站程序   平塘县凡科建站   平潭县企业建站   平武县建站培训   萍乡市建站程序   平乡县凡科建站   平阳县企业建站   平遥县建站培训   平阴县建站程序   平邑县凡科建站   平远县企业建站   平舆县建站培训   皮山县建站程序   普安县凡科建站   浦北县企业建站   浦城县建站培训   普洱市建站程序   普格县凡科建站   浦江县企业建站   普兰县建站培训   普宁市建站程序   莆田市凡科建站   迁安市企业建站   乾安县建站培训   潜江市建站程序   潜山市凡科建站  

友情链接: 医慧互通 创建网站教程 巴渝烤哥 美国免费建站平台 免费网页建站 免费自助建站 手机版

Copyright © 2002-2020 凡科建站_企业建站_建站培训_建站程序_自建网站 版权所有 (网站地图) 备案号:粤ICP备10235580号