Elegant Multi-Select Component With Autocomplete – SelectPure

Category: Form , Javascript , Recommended | July 2, 2021
Author: dudyn5ky1
Views Total: 2,307 views
Official Page: Go to website
Last Update: July 2, 2021
License: MIT

Preview:

Elegant Multi-Select Component With Autocomplete – SelectPure

Description:

SelectPure is a pure JavaScript (es6) library to create elegant single or multiple select controls with support for autocomplete and dynamic data rendering.

Also can be used as a tag & token management tool for your web app.

How to use it:

Install the SelectPure.

# Yarn
$ yarn add select-pure

# NPM
$ npm install select-pure --save

Import the SelectPure library.

import SelectPure from "select-pure";

Or directly include the bundled JavaScript on the webpage.

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

Create a container in which you want to render the select control.

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

Define an array of options for the select.

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",
  },
],

Create a new select control inside the container element you just created.

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

Enable the Multi-Select functionality.

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

Enable the Autocomplete functionality.

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

Set the pre-selected value(s).

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

Customize the icon displayed in the selected options.

var instance = new SelectPure(".example", {
    options: myOptions,
    icon: "fa fa-times" // uses Font Awesome
    inlineIcon: false // custom cross icon for multiple select.
});

Execute a callback function on change.

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

Customize the placeholder when no value is selected .

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

Get the currently selected value.

instance.value();

Reset the select.

instance.reset();

Default CSS classes.

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",
    }
});

The default CSS styles.

.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%;
}

Changelog:

07/02/2021

  • fix(select-pure): fix multiple renderred hidden inputs

v0.6.3 (05/03/2021)

  • refactor(select): refactor select component

v0.6.3 (05/03/2021)

  • package updated

v0.6.0 (03/29/2020)

  • fix bug with disabled options

v0.6.0 (03/26/2020)

  • update dependencies

v0.5.0 (03/01/2020)

  • add reset method

v0.4.0 (01/29/2020)

  • add custom classNames

v0.3.0 (12/20/2019)

  • Add placeholder, add method for getting select value

v0.2.3 (12/16/2019)

  • Ability to add custom cross icon for multiselect

v0.2.1 (10/07/2019)

  • fix(select): Don’t throw error when options are empty

You Might Be Interested In:


38 thoughts on “Elegant Multi-Select Component With Autocomplete – SelectPure

  1. tom

    selectpure.min.js:1 Uncaught TypeError: Cannot read property ‘map’ of undefined
    at Object._setValue (selectpure.min.js:1)
    at new (selectpure.min.js:1)
    at HTMLDocument. (grid.js:53)
    _setValue @ selectpure.min.js:1
    (anonymous) @ selectpure.min.js:1
    (anonymous) @ grid.js:53

    Reply
    1. Thijmen Dam

      For anyone wondering; add value: [] when you create a new SelectPure instance.

      Reply
  2. rgreed

    Found a bug on mozilla:

    After deleting the last entry in multi select, text is highlited.

    fix adding:

    .select-pure__option::-moz-selection{
    color: inherit;
    }

    to your css

    Reply
    1. Jefferson Martins

      probably was why you delete the key “value:” when instantiating

      Reply
    2. Chase

      You need to set the icon parameter in the initialization. If you’re using bootstrap, something like this works:

      let instance = new SelectPure(“.projectMulti”, {
      options: myOptions,
      autocomplete: true,
      multiple: true,
      icon: “glyphicon glyphicon-remove”

      Reply
    1. Christer

      Hi, great plugin, one question though. Can I set the value dynamically? I use id (integer) and tried to add the value e.g. [‘9′, ’12’] as string, as array but the onlyt time i
      t works is if I add the values manually.

      Reply
  3. Tsui Chi Wai Kenneth

    Great selection box, i am new to JavaScript. How can i get the final selections that let me to pass to other page?

    Reply
  4. Steve Left

    How can I use autocomplete for any match? Currently only does it with the first letter.Thanks!

    Reply
    1. René Marvera

      You can edit the bundle, look for the ‘startsWith’ method and change it for ‘include’ method.
      Sorry for my bad english.

      Reply
  5. petewhiddon2

    Cheap Content Writing Services in UAE
    Today, we live in an internet age. If a business is not on Google, it’s not there at all! Due to the large number of people turning to the internet as a source of information, and for purchasing a large volume of products, maintaining a healthy website that ranks high in search engines like Google is essential. WRITING4U offers a comprehensive range of SEO content writing services in the UAE

    Reply
  6. alia

    anyone knows why i got TypeError: t is undefined on selecting the element? for multi-select

    Reply
    1. René Marvera

      Don’t know if you’re still interested in the answer, but, if you’re filling your list, asynchronously, you should parse the “value” to String.

      So sorry for my bad english :c

      Reply
  7. Michel Trottier

    Fantastic script ! Thanks
    Would be nice to be able to use value 99 for label ALL in multiple select. If ALL(value=99) is selected, then other selected labels are automatically closed. If label other than ALL is selected, then label ALL is closed.
    example:
    var notify_lang_4 = new SelectPure(“#notify_lang_4”, {
    options: [
    {
    label: “ALL”,
    value: “99”,
    },
    {
    label: “English”,
    value: “0”,
    },
    {
    label: “Français”,
    value: “1”,
    },
    {
    label: “Español”,
    value: “2”,
    },
    {
    label: “italiano”,
    value: “3”,
    },
    {
    label: “Deutsche”,
    value: “4”,
    },
    {
    {
    label: “日本人”,
    value: “5”,
    },
    ],
    value: [“”],
    multiple: true,
    icon: “fa fa-times”,
    })
    Michel Trottier
    Montreal, Canada;

    Reply
  8. Michael

    Great code – exactly what I’m looking for – with one exception. I would like to enter values into a text box, click ‘Add’, and have the value added to the select box – as a visible selection. Can you provide guidance on how to do that?

    Reply
  9. Christian Hammervig

    I can’t get it to display the selector
    My code:
    import React from ‘react’;
    import byer from ‘../../components/byer’;
    import SelectPure from “select-pure”;

    var instance = new SelectPure(“.fisk”, {
    options: byer,
    multiple: true, // default: false
    autocomplete: true,
    placeholder: “select city”,
    onChange: value => { console.log(value); }
    });

    class Cars extends React.Component{

    render(){
    return(

    );
    }
    }

    export default Cars;

    What am I doing wrong?

    Reply
  10. Ryan

    hi, this is the most simples multi select plugin I have came accros.
    I need help in inserting data from database.

    I have a jquery function that gets the value from db via php file.
    this is the format
    $droplist[]=array(‘value’ => $statusID,’label’ => $status);
    retun json_encode($droplist);

    when I outpout to console.log (from javascript) I am getting the full list of $droplist values.
    but you function does not accept the value and the dropdown list remains empty
    console.log output:
    0: {value: “8”, label: “Granted”}
    1: {value: “40”, label: “New Filing”}
    2: {value: “41”, label: “Pending”}
    3: {value: “42”, label: “Registered”}
    4: {value: “43”, label: “Inactive”}
    length: 5
    //————- part of jquery function
    success: function (data){

    console.log(“getStatus dbData: “,data); // this data is correctly displayed in console

    //but the data below does not accept the values.
    var multi = new SelectPure(“.multi-select”, {
    value: [],
    options: [data],
    multiple: true,
    icon: “fa fa-times”,
    placeholder: “-Please select-“,
    onChange: value => { console.log(value); },
    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”,
    }
    });

    Reply
    1. Ryan

      I’ve got it working. but I cant remove the selected option. the (X) button is missing on the selected tag

      Reply
      1. Ryan

        I got it working. thanks to google chromes’ inspect feature.. I manage to get your X icon file name from your demo file, and added into the span class which was not included in the css.

        Reply
    1. Koushik J

      Hey @Ryan i also wanted know about the same. Did u get to know how that need to be done for post method.

      Reply
  11. Gio

    Hello, I found out that if you try to set pre-selected value with value 0, than the combobox doesn’t render it. The option is available to select, but without the ‘data-value’ attribute. Not sure if it’s only mine issue but worth checking.

    Reply
  12. Pete

    is there a way to limit selections, ie i am selecting from a list of 20 items but only max of 6 allowed to be selected ?

    Reply
  13. Pepe

    Hi. Thanks for the nice script!

    I found a bug: the placeholder does not disapear, when you select a tag.

    Is there a possibility to enter the myOptions-values as plain list instead a list of objects?

    Reply
    1. Justin

      add this to your style sheet

      .select-pure__placeholder–hidden{
      display: none !important;
      }

      Reply
      1. LA

        This above css had a long dash before the ‘hidden’. It should be two short dashes:
        .select-pure__placeholder–hidden {
        display: none !important;
        }

        Reply
  14. Chin

    After selecting the tags, how to access there values in html?

    Reply
  15. Denre.com

    Thank you for this nice plugin. Everything seems to be working corretly, except for the “onchange” function. I tested this on your demo site, but nothing gets logged to the console when adding or removing values.

    Reply
  16. Alexey

    could you please add posibility to place icon for items?
    options: [
    {
    label: “Barbina”,
    value: “ba”,
    icon: “/img/barbina.jpg”
    },

    to be rendered as:

    Barbina

    Reply

Leave a Reply