当前位置:主页 > JavsScript库 > 表单 >

高性能的选择框组件 - virtual-select.js
栏目分类:表单   发布日期:2021-08-17   浏览次数:

高性能、Material Design 风格的选择框替换,支持单选/多选、虚拟滚动(用于更大的数据列表)、实时搜索和动态数据渲染。

virtual-select使用:

1. 在 HTML 文档中加载 Virtual Select 的 JavaScript 和 CSS 文件。

<link rel="stylesheet" href="dist/virtual-select.min.css" />
<script src="dist/virtual-select.min.js"></script>

2. 创建一个容器来保存虚拟选择。

<div id="example-select"></div>

3. 为虚拟选择定义您自己的选项。

myOptions = [
  { label: '选项 1', value: '1', alias: '用于搜索的自定义标签' },
  { label: '选项 2', value: '2', description: '标签的自定义描述'},
  { label: '选项 3', value: '3' },
  ...
  { label: '选项 100000', value: '100000' },
],

3. 初始化虚拟选择库并完成。

VirtualSelect.init({
  ele: '#example-select',
  options: myOptions
});

4. 启用多选支持。

VirtualSelect.init({
  ele: '#example-select',
  options: myOptions,
  multiple: true
});

5. 启用实时搜索支持。

VirtualSelect.init({
  ele: '#example-select',
  options: myOptions,
  search: true
});

6. 自定义占位符文本。

VirtualSelect.init({
  ele: '#example-select',
  options: myOptions,
  placeholder: '在此处选择选项'
});

7. 定义一组禁用选项。

VirtualSelect.init({
  ele: '#example-select',
  options: myOptions,
  disabledOptions: [1, 1000, 10000]
});

8. 确定是否隐藏清除按钮。

VirtualSelect.init({
  ele: '#example-select',
  options: myOptions,
  hideClearButton: true
});

9. 更多配置选项。

VirtualSelect.init({
  
  // 渲染 dropbox 的父元素。(自我、正文或任何 css 选择器)
  dropboxWrapper: 'self',
  
  // 在视口上显示的选项数量
  optionsCount: 5,
  
  // 如果有选项说明
  hasOptionDescription: false,
  
  // 禁用全选
  disableSelectAll: false,
  
  // 选项高度
  optionHeight: '40px',
  
  // top, bottom, auto
  position: 'auto',
  
  // 没有选项显示时显示的文本
  noOptionsText: 'No results found',
  
  // 没有搜索结果时显示的文本
  noSearchResultsTex: 'No results found',
  
  // 当搜索被禁用时显示在全选复选框附近的文本
  selectAllText: 'Select all',
  
  // 显示为搜索输入占位符的文本
  searchPlaceholderText: 'Search...', 
  
  // 显示数量选择文本时使用的文本(即选择了 3 个选项)
  optionsSelectedText: 'options selected',
  
  // 显示no.of values时使用的文本选择文本并且只选择了一个值(即选择了1个选项)
  optionSelectedText: 'option selected',
  
  // 显示选定文本的所有值时使用的文本(即全部 (10))
  allOptionsSelectedText: 'All',
    
  // By default, when all values selected "All (10)" value text would be shown. Set true to show value text as "10 options selected".
  disableAllOptionsSelectedText: false,
  
  // By default, no.of options selected text would be shown when there is no enough space to show all selected values. Set true to override this.
  alwaysShowSelectedOptionsCount: false,
  
  // 将每个选定的值显示为带有删除图标的标签
  showValueAsTags: false,
  
  // 允许您添加新选项
  allowNewOption: true,
  
  // 加载时默认选择第一个选项
  autoSelectFirstOption: false,
  
  // 要在初始化时选择的单个值或值数组
  selectedValue: '',
  
  // 避免在设置初始值时触发“更改事件”
  silentInitialValueSet: false,
  
  // 自定义宽度
  dropboxWidth: null,
  
  // CSS z-index
  zIndex: 1,
  
  // 额外的 CSS 类
  additionalClasses: '',
  
  // 要在多选工具提示中显示的最大数量值
  noOfDisplayValues: 50,
  
  // 在标签中标记匹配的术语
  markSearchResults: false,
  
  // 工具提示的字体大小
  tooltipFontSize: '14px',
  
  // 工具提示的 CSS 文本对齐方式
  tooltipAlignment: 'center',
  
  // 工具提示的最大宽度
  tooltipMaxWidth: '300px',
  
  // 在下拉框顶部显示选定的选项
  showSelectedOptionsFirst: false,
  
  // 清除按钮的工具提示文本
  clearButtonText: 'clear',
  
  // 选择超过 noOfDisplayValues 选项时显示的文本(即 + 10 个以上...)
  moreText: 'more...',
  
  // 隐藏输入的名称属性
  name: '',
  
  // 保持 Dropbox 始终以固定高度打开
  keepAlwaysOpen: false,
  
  // 允许选择的最大选项数
  maxValue: 0,
  
  // 在移动设备等小屏幕上将 Dropbox 显示为弹出窗口
  showDropboxAsPopup: true,
  
  // 允许将 Dropbox 显示为弹出窗口的最大屏幕宽度
  popupDropboxBreakpoint: '576px',
  
  // 如果选择了所有选项,则隐藏值工具提示
  hideValueTooltipOnSelectAll: true,
  
  // 集成服务器搜索的回调函数
  onServerSearch: function(){}, 
  
  // 渲染标签的回调函数,可用于添加图片、图标或自定义内容
  labelRenderer: function(){},  
  
  // 仅当搜索值不为空时才显示要选择的选项
  showOptionsOnlyOnSearch: false,
  
  // 仅选择单击“选择”通过搜索过滤的选项时选择可见选项
  showOptionsOnlyOnSearch: false,
    
});


10. 您还可以通过 HTML 数据属性传递选项:

  • ‘multiple’: ‘multiple’,

  • ‘placeholder’: ‘placeholder’

  • ‘data-label-key’: ‘labelKey’

  • ‘data-value-key’: ‘valueKey’

  • ‘data-alias-key’: ‘aliasKey’

  • ‘data-search’: ‘search’

  • ‘data-hide-clear-button’: ‘hideClearButton’

  • ‘data-auto-select-first-option’: ‘autoSelectFirstOption’

  • ‘data-has-option-description’: ‘hasOptionDescription’

  • ‘data-options-count’: ‘optionsCount’

  • ‘data-option-height’: ‘optionHeight’

  • ‘data-position’: ‘position’

  • ‘data-no-options-text’: ‘noOptionsText’

  • ‘data-no-search-results-text’: ‘noSearchResultsText’

  • ‘data-silent-initial-value-set’: ‘silentInitialValueSet’

  • ‘data-dropbox-width’: ‘dropboxWidth’

  • ‘data-z-index’: ‘zIndex’

  • ‘data-no-of-display-values’: ‘noOfDisplayValues’

  • ‘data-allow-new-option’: ‘allowNewOption’

  • ‘data-mark-search-results’: ‘markSearchResults’

  • ‘data-tooltip-font-size’: ‘tooltipFontSize’

  • ‘data-tooltip-alignment’: ‘tooltipAlignment’

  • ‘data-tooltip-max-width’: ‘tooltipMaxWidth’

  • ‘data-show-selected-options-first’: ‘showSelectedOptionsFirst’

  • ‘data-hidden-input-name’: ‘hiddenInputName’

  • ‘data-disable-select-all’: ‘disableSelectAll’

  • ‘data-keep-always-open’: ‘keepAlwaysOpen’

  • ‘data-max-values’: ‘maxValues’

  • ‘data-additional-classes’‘additionalClasses’

  • ‘data-show-dropbox-as-popup’: ‘showDropboxAsPopup’

  • ‘data-popup-dropbox-breakpoint’: ‘popupDropboxBreakpoint’

  • ‘data-hide-value-tooltip-on-select-all’: ‘hideValueTooltipOnSelectAll’,

  • ‘data-show-options-only-on-search’: ‘showOptionsOnlyOnSearch’,

  • ‘data-select-all-only-visible’: ‘selectAllOnlyVisible’,

<div id="sample-select"
     multiple
     placeholder="选择国家"
     data-value-key="id"
     data-search="true"
></div>

11. API 方法。

// 获取选中的值
$('#example-select').val();
// 或
document.querySelector('#example-select').value;
  
// 设定值
document.querySelector('#example-select').setValue(value);
  
// 重置虚拟选择
document.querySelector('#example-select').reset();
  
// 打开
document.querySelector('#exmple-select').open();
  
// 关闭
document.querySelector('#example-select').close();
  
// 更新选项
document.querySelector('#example-select').setOptions(options);
  
// 设置禁用选项
document.querySelector('#example-select').setDisabledOptions(disabledOptions);
  
// 选择/取消选择所有选项
document.querySelector('#example-select').toggleSelectAll(true/false);
  
// 检查是否所有选项都被选中
document.querySelector('#example-select').isAllSelected();
  
// 添加选项
document.querySelector('#example-select').addOption({
  // 这里的选项
});
  
// 获取选中的值
document.querySelector('#example-select').getNewValue();
  
// 获取所选选项的显示值
document.querySelector('#example-select').getDisplayValue();
  
// 获取所选选项的详细信息
document.querySelector('#example-select').getSelectedOptions();
  
// 销毁实例
// 获取所选选项的详细信息
document.querySelector('#example-select').destroy();

12. 每次更改选项时触发一个函数。

document.querySelector('#example-select').addEventListener('change', function() {
  console.log(this.value);
});

13. 开启/关闭/复位前/后触发功能。

document.querySelector('#example-select').addEventListener('beforeOpen', function() {
  // 做点什么
});
  
document.querySelector('#example-select').addEventListener('beforeClose', function() {
  // 做点什么
});
  
document.querySelector('#example-select').addEventListener('afterOpen', function() {
  // 做点什么
});
  
document.querySelector('#example-select').addEventListener('afterClose', function() {
  // 做点什么
});
  
document.querySelector('#example-select').addEventListener('reset', function() {
  // 做点什么
});

官方网站:https://github.com/sa-si-dev/virtual-select

相关热词: 选择框组件virtual-sele

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库