bootstrap suggest搜索建议插件使用详解


Posted in Javascript onMarch 25, 2017

近日因工作需要看了下此插件。

首先下载bootstrap js包。添加此插件的引用。注意css样式要引用,不能忘记。

bootstrap suggest搜索建议插件使用详解

bootstrap suggest搜索建议插件使用详解

前台页面代码,因为楼主做的是选项卡切换查询不同的结果。

<tr>
  <th style="background: #fff;" width="30%">类型:</th>
       <td width="70%">
         <select class="selectpicker show-tick" id="SlideType">
           <option value="2">生活</option>
           <option value="1">首页</option>
           <option value="3">作品</option>
         </select>
       </td>
     </tr>
     <tr>
       <th style="background:#fff">标题:</th>
       <td>
 
         <div class="input-group" style="width:300px">
           <input type="text" class="form-control" id="Title">
           <div class="input-group-btn">
             <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
               <span class="caret"></span>
             </button>
             <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
           </div>
           <!-- /btn-group -->
         </div>
       </td>
</tr> 
//搜索建议框
      /* $('#Title').keyup(function () {
         var obj = $('#SlideType').val();
         var txtName = $('#Title').val().trim();
         $.post("/Slide/LoadSelect", { Index: obj, Name: txtName }, function (data) {
           if (data != null) {
             data = JSON.parse(data);
             var testdataBsSuggest = $("#Title").bsSuggest({
               indexId: 0,
               indexKey: 1,
               data: {
                 "value": data
               }
             }).on('onSetSelectValue', function (e, data) {
               var url = "";
               switch (obj) {
                 case "1": url = "";
                   break;
                 case "2": url = "HomeLife/HomeKnowledgeDetails?InfoGuid=";
                   break;
                 case "3": url = "";
                   break;
                 default:

               }
               $("#Url").val(url + data.id);
             });
           }
         });
       });*/

这是楼主根据不同的选项请求查询不同的数据,再在结果中搜索

下面说的就是第二种,是搜索插件内部的请求。

如下:

function GetSuggest(obj) {
      var testBsSuggest = $("#Title").bsSuggest({
        url: "/Slide/LoadSelect?Keyword=" + obj + "",
        getDataMethod: "firstByUrl",//获取数据的方式,url:一直从url请求;data:从 options.data 获取;firstByUrl:第一次从Url获取全部数据,之后从options.data获取
        effectiveFieldsAlias: { Title: "标题" },
        searchFields: ["Title"],
        idField: "InfoGuid",
        keyField: "Title",
        effectiveFields: ["Title"],
        showHeader: true,//显示 header
        showBtn: true,   //不显示下拉按钮
        delayUntilKeyup: false, //获取数据的方式为 firstByUrl 时,延迟到有输入/获取到焦点时才请求数据
      }).on('onSetSelectValue', function (e, keyword) {
        var url = "";
        switch (obj) {
          case "1": url = "";
            break;
          case "2": url = UrlJump(keyword.id);
            break;
          case "3": url = "";
            break;
        }

        $("#Url").val(url + keyword.id.substring(0, keyword.id.length - 1));
      });
    }

对应的后台代码:

bootstrap suggest搜索建议插件使用详解

最终页面显示的结果。

bootstrap suggest搜索建议插件使用详解

看看以下配置说明可以更改不同的需求。

####方法调用

禁用提示: $("input#test").bsSuggest("disable");
启用提示: $("input#test").bsSuggest("enable");
销毁插件: $("input#test").bsSuggest("destroy");
查看版本:$("input#test").bsSuggest("version");
####事件监听

onDataRequestSuccess: 当 AJAX 请求数据成功时触发,并传回结果到第二个参数
onSetSelectValue:当从下拉菜单选取值时触发,并传回设置的数据到第二个参数
onUnsetSelectValue:当设置了 idField,且自由输入内容时触发(与背景警告色显示同步)
$("#test")
  .on('onDataRequestSuccess', function (event, result) {
    console.log(result);
  })
  .on('onSetSelectValue', function (e, keyword) {
    console.log('onSetSelectValue: ', keyword);
  })
  .on('onUnsetSelectValue', function (e) {
    console.log('onUnsetSelectValue');
  });

配置参数

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

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

至此结束。

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

Javascript 相关文章推荐
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
JS实现基本的网页计算器功能示例
Jan 16 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
JS实现列表页面隔行变色效果
Mar 25 #Javascript
angular仿支付宝密码框输入效果
Mar 25 #Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 #jQuery
axios基本入门用法教程
Mar 25 #Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 #Javascript
ECMAScript6 新特性范例大全
Mar 24 #Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 #Javascript
You might like
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
坏狼php学习 计数器实例代码
2008/06/15 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
python 日志增量抓取实现方法
2018/04/28 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
教师党员思想汇报
2014/01/06 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2015暑假实习报告范文
2015/07/13 职场文书