Filterable And Ajax-enabled jQuery Select Enhancement Plugin - TinySelect

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="//code.jquery.com/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:

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.

  • Publication date: 16.07.2018
  • Source