Select plugin alternative to Select2 Vanilla JS

Related tags

Learning resource javascript select input
Overview

NPM package link https://www.npmjs.com/package/selectra

Selectra

Vanilla JS Select2 replacement, no jQuery components just pure JS. A custom select input

Features

  • Supports multiple
  • Supports search filter if enabled in option
  • Supports optgroup
  • Supports query selector, allows to initiate multiple selects by class
  • Tabbing through input fields still triggers this custom element
  • Easy to setup
  • Works with frameworks such as VueJS, example included in demo

Demo

You can view a demo using the latest files on https://cirykpopeye.github.io/selectra/

Installation

Package manager

npm install selectra

Manual

Copy both dist/selectra.min.css and dist/selectra.min.js

Usage

HTML

<select id="custom-select" class="form-control" multiple>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

or

<select id="custom-select" class="form-control">
  <optgroup label="Option group">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
</select>

Via a bundler

import Selectra, { createSelectra } from 'selectra'

const customSelect = new Selectra('#custom-select')
customSelect.init()

// or

createSelectra('#custom-select')
@import "selectra/src/scss/index.scss"

To fetch the value

// Will return option1, or ['option1', 'option2'] if multiple and both selected
document.querySelector('#custom-select').val() 
// document.querySelector('#custom-select').value can still be used, though with multiple .selectedOptions should be used, .val() simplifies this

To set the value

document.querySelector('#custom-select').val('option1') 
// or for multiple
document.querySelector('#custom-select').val(['option1', 'option2'])

Via script import

<head>
  <link rel="stylesheet" href="<path-to-assets>/selectra.min.css">
</head>
...
<script src="<path-to-assets>/selectra.min.js"></script>
<script>
  const  customSelect = new Selectra('#custom-select', {
    search: true
  })
  customSelect.init()

  // or
  createSelectra('#custom-select', {
    search: true
  })
</script>

Set options programmatically

createSelectra('#custom-select', {
  options: [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' }
  ]
})

// or optgroups
createSelectra('#custom-select', {
  options: [
    {
      label: 'Group 1',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ]
    },
    {
      label: 'Group 2',
      options: [
        { value: 'option3', label: 'Option 3' },
        { value: 'option4', label: 'Option 4' }
      ]
    }
  ]
})

Options

Option Value Description
search boolean Transforms the button into a input field, on click options open and can be searched
langInputPlaceholder string Sets the translated value for input. Default: Search
langEmptyValuePlaceholder string Sets the translated value if option yet to be selected. Default: Pick a value
options array Array of options, or option groups

CSS / SCSS variables

SCSS variable CSS variable Default value
$selectra-container-min-width --selectra-container-min-width 300px
$selectra-options-bg --selectra-options-bg #eee
$selectra-options-max-height --selectra-options-max-height 300px
$selectra-options-scrollbar-width --selectra-options-scrollbar-width 6px
$selectra-options-scrollbar-track-color --selectra-options-scrollbar-track-color #f1f1f1
$selectra-options-scrollbar-thumb-color --selectra-options-scrollbar-thumb-color #888
$selectra-options-scrollbar-thumb-hover-color --selectra-options-scrollbar-thumb-hover-color #555
$selectra-options-shadow --selectra-options-shadow 3px 3px 3px rgba(0, 0, 0, 0.16)
$selectra-options-border-radius --selectra-options-border-radius 4px
Comments
  • Trim whitespaces from option element label

    Trim whitespaces from option element label

    When you have the following HTML code:

    <select name="tz" class="my-select">
<option value="UTC">
			Universal Time, Coordinated (UTC)		
</option>
<option value="Africa/Abidjan" selected>
					Africa/Abidjan				
</option>
</select>

    then it renders with the white spaces, like image

    Trimming white spaces, solves the issue.

    opened by laoneo 0
  • Make use of documentfragment

    Make use of documentfragment

    Options are added one by one to the DOM, which causes a layout + reflow for every single option added. For performance, you should make use of a DocumentFragment.

    opened by cirykpopeye 0
  • Escape options values and labels

    Escape options values and labels

    Because you are using raw HTML to construct the options this may break if you have an option value with ">" character in it, or a label if you haven't escaped properly. There lots of other places in the code that could have the same problem.

    opened by cirykpopeye 0
  • Not working on safari

    Not working on safari

    Hi,

    I'm using selectra like so :

    import { createSelectra } from 'selectra';

const selects = document.querySelectorAll('.custom-select');

selects.forEach((select) => {
  createSelectra(select);
});

    On your demo, it doesn't work on safari for the first select "Gender" either : https://cirykpopeye.github.io/selectra/

    Safari v15.4 MacOs 12.3.1

    Would appreciate help please !

    opened by oguilleux 1
  • import issue : export default not found

    import issue : export default not found

    Hi,

    When trying to import the library like so :

    import Selectra from 'selectra';

    I'm having this message :

    export 'default' (imported as 'Selectra') was not found in 'selectra' (possible exports: createSelectra)

    Can you add the class as default export as well as createSelectra please ?

    Thanks

    opened by oguilleux 0
  • Keyboard navigation

    Keyboard navigation

    Some comments:

    • Keyboard navigation is completely broken. It opens every select box without closing the previous one.
    • Clicking the value field should toggle the state of the dropdown, not just open it. At the very least the chevron should do this if you want to provide the ability to edit the input via text.
    • Animations are too slow for daily use, and there are no ways to control them via variables. Provide at least an animation timing scaling variable.
    • You should use :focus-visible instead of :focus for the keyboard navigation focus states.
    • up/down arrow don't work to select options on focus.
    • You trigger the dropdown on mousedown. This is fine, but you should support the quickselect action that's a part of the w3c spec for select boxes (mouse down to open, drag to the option you desire, mouse up to select that option and close the dropdown)
    opened by cirykpopeye 0
Owner
Founder of Web hints
null
GitHub https://cirykpopeye.github.io/selectra
A fast, vanilla JS customisable select box/text input plugin for modern browsers ⚡

choices A fast, vanilla, lightweight (~16kb gzipped ?? ), configurable select plugin for modern browsers. Similar to Select2 and Selectize but without

null 9 Aug 9, 2022
Better select widgets in vanilla javascript.

Select Better select widgets in vanilla javascript. The code is intentionally very simple and close to browser defaults. Usage <link rel="stylesheet"

Tobias Bengfort 2 Jun 17, 2022
🍦 ✨ Simple multi-select pure vanilla Javascript library.

multiSelect.js ✨ Simple multi-select pure vanilla Javascript library. ?? Live Demo v1.0.8 multiSelect.js is a simple, pure vanilla Javascript library

Jacob Kleiman 5 Mar 15, 2022
Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.

tail.select.js - Beautify Select Fields (formerly tail.select) Replace and Improve your HTML <select> fields with style and without jQuery! The tail.s

Ciprian Popescu 69 Dec 30, 2022
This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js. But in most cases, I would recommend you to use something like Express in a production project for productivity purposes.

Eduardo Dantas 7 Jul 19, 2022
The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support.

bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with

SnapAppointments 9.7k Dec 30, 2022
The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support

bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with

SnapAppointments 9.7k Dec 30, 2022
Picky is a jQuery plugin that provides simple client-side date validation when entering dates using select tags.

jquery.picky.js Picky is a jQuery plugin that provides simple client-side date validation when entering dates using select tags. Features Instead of g

Patrick Crowley 5 Apr 25, 2021
a jQuery plugin to provid multiple-select function through 2 List-Boxes

bala.DualSelectList bala.DualSelectList is a jQuery plugin to provid multiple-select function through 2 List-Boxes. Demo page: Single Element: https:/

null 11 Nov 1, 2022
A jQuery Single/Multi Select plugin which can be used on almost any device

jquery.sumoselect jquery.sumoselect.js - A beautiful cross device Single/Multi Select jQuery Select plugin. A jQuery plugin that progressively enhance

Hemant Negi 537 Dec 7, 2022
Another table select prompt plugin of inquirer.js, with powerful table render and filters.

inquirer-table-select-prompt Table row selection prompt for Inquirer.js 动机 现有的 inquirer.js 没有支持表格行选中的命令行交互的插件. 社区内能查找到的，只有一个二维数组的 checkbox，eduardobouc

锂电 3 Jan 7, 2023
The (extremely) lightweight alternative to the mmenu.js plugin for creating off-canvas mobile menus.

mmenu light The (extremely) lightweight alternative to the mmenu.js plugin for creating off-canvas mobile menus with the exact look and feel. Examples

Fred Heusschen 172 Dec 12, 2022
A JavaScript plugin for creating a tickerboard effect. Plugin for React or vanilla JS.

ticker-board A JavaScript plugin for creating a tickerboard effect. See the Ticker Board page for more info. Importing it There are basically two ways

Robin James Kerrison 6 Aug 11, 2022
Bootstrap5-tags - Replace select[multiple] with nices badges

Tags for Bootstrap 4/5 How to use An ES6 native replacement for select using standards Bootstrap 5 (and 4) styles. No additional CSS needed! Supports

Thomas Portelange 75 Jan 9, 2023
Select creates a dropdown list of items with the selected item in closed view.

Native Base Select ?? This module includes a customizable multi-select and a single select component for Native Base. The package is both Android and

Blump Tech 3 Dec 25, 2022
Annotation tools for the web. Select text, images, or (nearly) anything else, and add your notes.

Annotator Annotator is a JavaScript library for building annotation applications in browsers. It provides a set of interoperable tools for annotating

Open Annotation 2.6k Dec 23, 2022
🛠 Highly customisable, minimalistic input x select field for React.

Insect ?? Highly customisable, minimalistic input x select field for React. ⚡️ Features Tiny size (~4kb Gzip) 100% responsive. Highly customisable. Su

Kadet 32 Oct 29, 2022
Animated Select Component (React)

Spring Chain We built a custom select component with a menu with animations and beautiful gradients and a glassy style, is called "Spring Chain" becau

Cecilia Benitez 7 Feb 6, 2022
A custom select dropdown. This is something that is not too difficult to make.

Custom-Dropdown-JS A custom select dropdown using basic JS fucntionality. This is something that is not too difficult to make. But it shows that you h

Devanshu Vashishtha 2 Mar 26, 2022