Generic Filterable Item Picker With Pure JavaScript – pickathing

Preview:

Description:

pickathing is a really simple JavaScript library that transforms the normal select box into a searchable dropdown picker for quickly and easily picking anything you prefer.

How to use it:

Load both the pickathing’s JavaScript and CSS files in the html file.

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

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>

Just call the function on the select element and done.

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

Changelog:

v0.11.3 (06/02/2018)

• bugfix