Filterable And Ajax-enabled jQuery Select Enhancement Plugin - TinySelect

File Size: 76.4 KB
Views Total: 3269
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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

<select id="select2">
  dataUrl: "file.json" 

4. Disable the live filter.

  showSearch: false

5. Customize the text for AJAX loading status.

  txtLoading: "Loading...",
  txtAjaxFailure: "Error...",

6. Custom function to parse data from ajax request.

   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


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


  • 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.