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


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>

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);



(String) Id of the select you want to activate


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

options (optional)

(Object) key: value pairs of other options


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


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


(String) Sets the placeholder in the search field


(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


(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


You may also like...

Leave a Reply

Your email address will not be published.