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

带有自动完成功能的优雅多选组件 – SelectPure
栏目分类:表单   发布日期:2021-09-08   浏览次数:

SelectPure 是一个纯 JavaScript (es6) 库,用于创建优雅的单选或多选控件,并支持自动完成和动态数据呈现。

也可以用作您的网络应用程序的标签和令牌管理工具。

如何使用它:

安装 SelectPure。

# Yarn
$ yarn add select-pure
 
# NPM
$ npm install select-pure --save

导入 SelectPure 库。

import SelectPure from "select-pure";

或者直接在网页上包含捆绑的 JavaScript。

<script src="bundle.min.js"></script>

创建要在其中呈现选择控件的容器。

<span class="example"></span>

为选择定义一组选项。

const myOptions = [ 
  { 
    label: "New York", 
    value: "NY", 
  }, 
  { 
    label: "Washington", 
    value: "WA", 
  }, 
  { 
    label: "California", 
    value: "CA", 
  }, 
  { 
    label: "New Jersey", 
    value: "NJ", 
  }, 
  { 
    label: "North Carolina", 
    value: "NC", 
  }, 
],

在您刚刚创建的容器元素内创建一个新的选择控件。

var instance = new SelectPure(".example", { 
    options: myOptions 
});

启用多选功能。

var instance = new SelectPure(".example", { 
    options: myOptions, 
    multiple: true // 默认: false 
});

启用自动完成功能。

var instance = new SelectPure(".example", { 
    options: myOptions, 
    autocomplete: true // 默认: false 
});

设置预选值。

var instance = new SelectPure(".example", { 
    options: myOptions, 
    value: ["NY", "CA"] 
});

自定义所选选项中显示的图标。

var instance = new SelectPure(".example", {
    options: myOptions,
    icon: "fa fa-times" // 使用 Font Awesome
    inlineIcon: false // 用于多选的自定义十字图标。
});

在更改时执行回调函数。

var instance = new SelectPure(".example", {
    options: myOptions,
    onChange: value => { console.log(value); }
});

未选择任何值时自定义占位符。

var instance = new SelectPure(".example", {
    placeholder: false
});

获取当前选择的值。

instance.value();

重置选择。

instance.reset();

默认 CSS 类。

var instance = new SelectPure(".example", {
    options: myOptions,
    classNames: {
      select: "select-pure__select",
      dropdownShown: "select-pure__select--opened",
      multiselect: "select-pure__select--multiple",
      label: "select-pure__label",
      placeholder: "select-pure__placeholder",
      dropdown: "select-pure__options",
      option: "select-pure__option",
      autocompleteInput: "select-pure__autocomplete",
      selectedLabel: "select-pure__selected-label",
      selectedOption: "select-pure__option--selected",
      placeholderHidden: "select-pure__placeholder--hidden",
      optionHidden: "select-pure__option--hidden",
    }
});

默认的 CSS 样式。

.select-wrapper {
  margin: auto;
  max-width: 600px;
  width: calc(100% - 40px);
}
 
.select-pure__select {
  align-items: center;
  background: #f9f9f8;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  color: #363b3e;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  justify-content: left;
  min-height: 44px;
  padding: 5px 10px;
  position: relative;
  transition: 0.2s;
  width: 100%;
}
 
.select-pure__options {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  color: #363b3e;
  display: none;
  left: 0;
  max-height: 221px;
  overflow-y: scroll;
  position: absolute;
  top: 50px;
  width: 100%;
  z-index: 5;
}
 
.select-pure__select--opened .select-pure__options {
  display: block;
}
 
.select-pure__option {
  background: #fff;
  border-bottom: 1px solid #e4e4e4;
  box-sizing: border-box;
  height: 44px;
  line-height: 25px;
  padding: 10px;
}
 
.select-pure__option--selected {
  color: #e4e4e4;
  cursor: initial;
  pointer-events: none;
}
 
.select-pure__option--hidden {
  display: none;
}
 
.select-pure__selected-label {
  background: #5e6264;
  border-radius: 4px;
  color: #fff;
  cursor: initial;
  display: inline-block;
  margin: 5px 10px 5px 0;
  padding: 3px 7px;
}
 
.select-pure__selected-label:last-of-type {
  margin-right: 0;
}
 
.select-pure__selected-label i {
  cursor: pointer;
  display: inline-block;
  margin-left: 7px;
}
 
.select-pure__selected-label i:hover {
  color: #e4e4e4;
}
 
.select-pure__autocomplete {
  background: #f9f9f8;
  border-bottom: 1px solid #e4e4e4;
  border-left: none;
  border-right: none;
  border-top: none;
  box-sizing: border-box;
  font-size: 16px;
  outline: none;
  padding: 10px;
  width: 100%;
}


官方网站:https://github.com/dudyn5ky1/select-pure

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