choicesjs是一款轻量级可配置的标签输入插件-BFW插件库

choicesjs是一款轻量级可配置的标签输入插件

一款轻量级的标签输入插件，配置丰富，支持下拉选择输入、搜索输入、标签编辑等功能。

使用方式：

1、引入css和js代码

如果是npm

npm install choices.js

如果是yarn

yarn add choices.js

2、准备dom

3、配置

  document.addEventListener('DOMContentLoaded', function () {
          var element = document.getElementById('my-select');
          var clearButton = document.getElementById('my-clear-button');
          element.choices = new Choices(
          element,
          {
            maxItemCount: 5,
            removeItemButton: true,
            choices: [
            { value: 'BE', label: 'Belgium' },
            { value: 'FR', label: 'France' },
            { value: 'NL', label: 'Netherlands' }] });
})

参数与方法：

  // Pass single element
  const element = document.querySelector('.js-choice');
  const choices = new Choices(element);

  // Pass reference
  const choices = new Choices('[data-trigger]');
  const choices = new Choices('.js-choice');

  // Pass jQuery element
  const choices = new Choices($('.js-choice')[0]);

  // Passing options (with default options)
  const choices = new Choices(element, {
    silent: false,
    items: [],
    choices: [],
    renderChoiceLimit: -1,
    maxItemCount: -1,
    addItems: true,
    addItemFilter: null,
    removeItems: true,
    removeItemButton: false,
    editItems: false,
    allowHTML: true
    duplicateItemsAllowed: true,
    delimiter: ',',
    paste: true,
    searchEnabled: true,
    searchChoices: true,
    searchFloor: 1,
    searchResultLimit: 4,
    searchFields: ['label', 'value'],
    position: 'auto',
    resetScrollPosition: true,
    shouldSort: true,
    shouldSortItems: false,
    sorter: () => {...},
    placeholder: true,
    placeholderValue: null,
    searchPlaceholderValue: null,
    prependValue: null,
    appendValue: null,
    renderSelectedChoices: 'auto',
    loadingText: 'Loading...',
    noResultsText: 'No results found',
    noChoicesText: 'No choices to choose from',
    itemSelectText: 'Press to select',
    addItemText: (value) => {
      return `Press Enter to add <b>"${value}"</b>`;
    },
    maxItemText: (maxItemCount) => {
      return `Only ${maxItemCount} values can be added`;
    },
    valueComparer: (value1, value2) => {
      return value1 === value2;
    },
    classNames: {
      containerOuter: 'choices',
      containerInner: 'choices__inner',
      input: 'choices__input',
      inputCloned: 'choices__input--cloned',
      list: 'choices__list',
      listItems: 'choices__list--multiple',
      listSingle: 'choices__list--single',
      listDropdown: 'choices__list--dropdown',
      item: 'choices__item',
      itemSelectable: 'choices__item--selectable',
      itemDisabled: 'choices__item--disabled',
      itemChoice: 'choices__item--choice',
      placeholder: 'choices__placeholder',
      group: 'choices__group',
      groupHeading: 'choices__heading',
      button: 'choices__button',
      activeState: 'is-active',
      focusState: 'is-focused',
      openState: 'is-open',
      disabledState: 'is-disabled',
      highlightedState: 'is-highlighted',
      selectedState: 'is-selected',
      flippedState: 'is-flipped',
      loadingState: 'is-loading',
      noResults: 'has-no-results',
      noChoices: 'has-no-choices'
    },
    // Choices uses the great Fuse library for searching. You
    // can find more options here: https://fusejs.io/api/options.html
    fuseOptions: {
      includeScore: true
    },
    callbackOnInit: null,
    callbackOnCreateTemplates: null
  });

详细的配置参数介绍请浏览：https://github.com/Choices-js/Choices

示例代码：

<html>

<head>
    <!-- Include Choices CSS -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/choices.9.0.1.css">
    <!-- Include Choices JavaScript (latest) -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/choices.9.0.1.js"></script>
</head>

<body>
    <form>
        <label for="my-field">My field</label>
        <select id="my-select" multiple type="search"></select>
        <button id='my-clear-button' type="button">Clear the field</button>
        <button id='my-reset-button' type="reset">Clear the form</button>
    </form>


    <script>
        document.addEventListener('DOMContentLoaded', function () {
          var element = document.getElementById('my-select');
          var clearButton = document.getElementById('my-clear-button');
          element.choices = new Choices(
          element,
          {
            maxItemCount: 5,
            removeItemButton: true,
            choices: [
            { value: 'BE', label: 'Belgium' },
            { value: 'FR', label: 'France' },
            { value: 'NL', label: 'Netherlands' }] });
        
        
        
          clearButton.onclick = function () {
            element.choices.removeActiveItems();
          };
          element.addEventListener(
          'addItem',
          function (event) {
            // do something creative here...
            console.log(event.detail.id);
            console.log(event.detail.value);
            console.log(event.detail.label);
            console.log(event.detail.customProperties);
            console.log(event.detail.groupValue);
          },
          false);
        
        });
    </script>


</body>

</html>

github地址：https://github.com/Choices-js/Choices