Filterable And Ajax-enabled jQuery Select Enhancement Plugin - TinySelect

TinySelect is a small yet powerful jQuery plugin used to enhance the default select box with the support of live filtering and remote data source via AJAX requests.

How to use it:

1. Load jQuery JavaScript library together with the tinyselect.css and tinyselect.js into the html page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/tinyselect.js"></script>
<link rel="stylesheet" href="css/tinyselect.css">

2. Create a basic filterable select box with static data.

<select id="select1">
  <option value="0">option a</option>
  <option value="1">option b</option>
  <option value="2">option c</option>
  <option value="3">option d</option>
  <option value="4">option e</option>
  <option value="5">option f</option>
  <option value="6">option g</option>
  <option value="7">option h</option>
</select>

$("#select1").tinyselect();

3. Create a dynamic filterable select box where data is loaded from file.json.

<select id="select2">
  
</select>

$("#select2").tinyselect({ 
  dataUrl: "file.json" 
});

4. Disable the live filter.

$("#select1").tinyselect({ 
  showSearch: false
});

5. Customize the text for AJAX loading status.

$("#select1").tinyselect({ 
  txtLoading: "Loading...",
  txtAjaxFailure: "Error...",
});

6. Custom function to parse data from ajax request.

$("#select1").tinyselect({ 
   dataParser: function(){}
});

7. All default options.

// Show search box
showSearch: true,

// case sensitive?
searchCaseSensitive: true,

// Text to show while loading ajax request
txtLoading: "Loading...",

// Text to show, if ajax loading fails
txtAjaxFailure: "Error...",

// URL where to load content. 
// If value is not set, plugin reads content from select element
dataUrl: null,

//  Custom function to parse data from ajax request
dataParser: null

Changelog:

v2.0.0 (2023-01-05)

• Rebuilt dist js

v2.0.0 (2022-12-07)

• Updated packages & deprecated jquery 1.x

v1.0.6 (2018-07-16)

• Updated dev package versions
• Recompiled with newer js uglify (this in turn reduced filesize by 7 bytes.. Yay)
• Replaces tabs from source

2016-07-09

• Search case sensitivity can now be set

---

This awesome jQuery plugin is developed by McFizh. For more Advanced Usages, please check the demo page or visit the official website.