Simple Select Filterable Item Written In Vanilla JS | pickathing

pickathing is a simple JavaScript library that turns a normal select box into a searchable dropdown picker for quickly and easily picking anything you like.

how to filter elements in javascript, filtersearch javascript, jquery search filter example, javascript search filter array of objects

simple-select-filterable-item-picker

How to use it:

1. Load both the JavaScript and CSS slicing files into an HTML file.

<link rel="stylesheet" href="dist/pickathing.css">
<script src="dist/pickathing.js"></script>

2. Assuming you have a regular select box like this:

<select name="demo-select" id="demo-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4" selected>Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
  <option value="9">Option 9</option>
  <option value="10">Option 10</option>
</select>

3. Just call the function on the given element.

// shows search field
var demoSelect = new Pickathing('demo-select', true);
// hides search field
var demoSelect = new Pickathing('demo-select', false);

Parameters

element-id

(String) Id of the select you want to activate

hasSearch

(Boolean) true/false determines if the searchfield is added or not

options (optional)

(Object) key: value pairs of other options

options.filter

(Instance) Instance of already initialized Pickathing select which gets filtered BY this select

options.filterAttr

(String) Attribute for which to look when filtering another select (Has to be present if you use options.filter)

options.searchLabel

(String) Sets the placeholder in the search field

options.focusDelay

(Number) Sets delay after the search field or the first item is selected. Should match transition of opening the dropdown. If you did not change transition in CSS you do not have to change this value

options.ignoreDiacritics

(Boolean) true/false determines if the searchfield ignores diacritics or not

generic filterable item picker, pickathing plugin/github


See Demo And Download

Developer Name: Symphony9

Official Website: Click Here

Share

You may also like...

Leave a Reply

Your email address will not be published.