实现多选和搜索过滤功能的jQuery下拉列表框插件

Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择。

在线预览   源码下载

使用方法

使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css、jQuery和fm.selectator.jquery.js文件。

<link rel="stylesheet" href="fm.selectator.jquery.css"/>
<script src="jquery-1.11.0.min.js"></script>
<script src="fm.selectator.jquery.js"></script>        
HTML结构

一个选项带图标级带分组选项的下拉列表的HTML结构如下:

<label for="select">
  Multi select with custom content:
</label>
<select id="select" name="select" multiple>
  <optgroup label="Group one" class="group_one">
    <option value="1" class="option_one" data-subtitle="Et" data-left="<img src=‘images/ingi.png‘>" data-right="1">One</option>
    <option value="2" class="option_two" data-subtitle="To" data-left="<img src=‘images/runa.png‘>" data-right="2">Two</option>
  </optgroup>
  <optgroup label="Group two" class="group_two">
    <option value="3" class="option_three" data-subtitle="Tre" data-left="<img src=‘images/jogvan.png‘>" data-right="3">Three</option>
    <option value="4" class="option_four" selected data-left="<img src=‘images/noimage.png‘>" data-right="4">Four</option>
    <option value="5" class="option_five" selected data-left="<img src=‘images/noimage.png‘>" data-right="5">Five</option>
    <option value="6" class="option_six">Six</option>
  </optgroup>
  <optgroup label="Group three" class="group_three">
    <option value="7" class="option_seven">Seven</option>
  </optgroup>
  <option value="8" class="option_eight" data-subtitle="Otte">Eight</option>
  <option value="9" class="option_nine">Nine</option>
  <option value="10" class="option_ten" selected>Ten</option>
  <option value="11" class="option_eleven" selected>Eleven</option>
  <option value="12" class="option_twelve">Twelve</option>
  <option value="13" class="option_thirteen">Thirteen</option>
  <option value="14" class="option_fourteen">Fourteen</option>
</select>
<input value="activate selectator" id="activate_selectator4" type="button">  
初始化插件

在页面DOM元素加载完毕之后,可以通过selectator()方法来初始化该下拉列表插件。

$(‘#selectBox‘).selectator();

配置参数

$(‘#selectBox‘).selectator({
    prefix: ‘selectator_‘,             // CSS class prefix
    height: ‘auto‘,                    // auto or element
    useDimmer: false,                  // dims the screen when option list is visible
    useSearch: true,                   // if false, the search boxes are removed and
                                       //   `showAllOptionsOnFocus` is forced to true
    keepOpen: false,                   // if true, then the dropdown will not close when
                                       //   selecting options, but stay open until losing focus
    showAllOptionsOnFocus: false,      // shows all options if input box is empty
    selectFirstOptionOnSearch: true,   // selects the topmost option on every search
    searchCallback: function(value){}, // Callback function when enter is pressed and
                                       //   no option is active in multi select box
    labels: {
        search: ‘Search...‘            // Placeholder text in search box in single select box
    }
});                

在线预览   源码下载

时间: 2024-10-11 09:50:45

实现多选和搜索过滤功能的jQuery下拉列表框插件的相关文章

asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页

使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下. 使用方法略过,这里将介绍如何实现打印多页是可以分页. 现在提供两种方法思路: 1.根据特定的打印机型号和使用的纸张类型,然后用JS来算出每页多高,按照每张纸的高度来进行适当的增减高度.(这种方式缺点就是只能针对单中类型的纸张,计算十分的繁琐,要些很多加减法 -_-);). 参考A4纸高度的网页:http://www.jb51.net/office/word/67360.html 2.在如上一个思路的方式,试着查找能不能自

Django DRF:过滤&amp;搜索&amp;排序功能

过滤功能利用的是第三方包 django_filters,搜索我排序利用的是 Django DRF 提供的 filters 示例代码如下: from rest_framework import filters # 搜索和排序功能 # 注意:这两个是 DRF 提供的功能 from django_filters.rest_framework import DjangoFilterBackend # DjangoFilterBackend 是精确(查找)过滤,即 字段值必须要完全一样才能匹配成功 imp

教你用Java web实现多条件过滤功能

生活中,当你闲暇之余浏览资讯的时候,当你搜索资料但繁杂信息夹杂时候,你就会想,如何更为准确的定位需求信息.今天就为你带来: 分页查询 需求分析:在列表页面中,显示指定条数的数据,通过翻页按钮完成首页/上一页/下一页/尾页的查询 数据分析: 通过观察,页面上需要显示下面的几个数据:当前页:currentPage页面大小:pageSize总页数:totalPage首页:1上一页:prevPage下一页:nextPage尾页:endPage总条数:totalCount结果集:result 那么,我们应

利用css实现搜索过滤

无意中找到一种利用css就可实现的搜索过滤的方法,不得不说看了代码之后确实被惊艳到了,亏我之前面试还因为做这个功能做太慢而拖了后腿.在此记录下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"&g

Android中ListView字母排序,实现字母挤压效果以及右侧快速选中字母,搜索关键字功能

Android中ListView字母排序,实现字母挤压效果以及右侧快速选中字母,搜索关键字功能 本文中阐述如何自定义EditText实现搜索框自定义的样式以及挤压字母的思路等 自定义EditText 相关的drawable文件 主界面以及相关的适配器 结果展示 定义要呈现的EditText的样式 public class ClearEditText extends EditText implements OnFocusChangeListener, TextWatcher { /** * 定义删

谈一谈EasyUI的TreeGrid的过滤功能

写在最前面 这个星期一直在纠结easyui的treegrid的过滤功能,原因呢,自然是项目中一个莫名奇妙的需求. easyui虽说是后端程序员的前端框架,但是说句实话,除去api,让我直接写里面的节点信息的话,还真是无从下手,在这里先对前端的同学膜拜下. 说下需求吧,最近一个项目中有个界面使用的easyui的treegrid展示,起初是没什么问题的,但是随着数据的导入发现实际操作上十分不便.原因呢是开发的时候treegrid并没有做分页的处理,目前测试环境数据达到456条,想从中找到一条然后处理

solr入门之參考淘宝搜索提示功能优化拼音加汉字搜索功能

首先看一下从淘宝输入搜索keyword获取到的一些数据信息: 第一张:使用拼音的全程来查询 能够看到提示的是匹配的转换的拼音的方式,看最后一个提示项 这里另一个在指定分类文件夹下搜索的功能,难道后台还存储的类目的信息? 另一个标签的信息要存储 第二使用首字母来匹配 这里看不出来 淘宝的东西太多了,首字母直接有了相应的全程 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA

Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能

版本: django:2.1.7 python:3.7 Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如下: paginator = Paginator(stat_list, numtmp) try: flight_stats = paginator.page(1) except PageNotAnInteger: flight_stats =

含有过滤功能的android流式布局

FilterFlowLayout 含有过滤功能的流式布局, 参考FlowLayout 可以去除宽度不在范围(比例或真实值)内的子view 可以设置最大行数 可以添加组件间水平间距 可以添加行间距 系统要求 Android 4.0以上 快速使用 <me.codeboy.android.lib.FilterFlowLayout xmlns:cb="http://schemas.android.com/apk/res-auto" android:id="@+id/filter