Wednesday, September 18, 2024
HomejQueryFilterable And Ajax-enabled jQuery Choose Enhancement Plugin - TinySelect

Filterable And Ajax-enabled jQuery Choose Enhancement Plugin – TinySelect


TinySelect is a small but highly effective jQuery plugin used to reinforce the default choose field with the assist of reside filtering and distant knowledge supply by way of AJAX requests.

How one can use it:

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


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

2. Create a fundamental filterable choose field with static knowledge.


<choose id="select1">
  <possibility worth="0">possibility a</possibility>
  <possibility worth="1">possibility b</possibility>
  <possibility worth="2">possibility c</possibility>
  <possibility worth="3">possibility d</possibility>
  <possibility worth="4">possibility e</possibility>
  <possibility worth="5">possibility f</possibility>
  <possibility worth="6">possibility g</possibility>
  <possibility worth="7">possibility h</possibility>
</choose>

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

3. Create a dynamic filterable choose field the place knowledge is loaded from file.json.


<choose id="select2">
  
</choose>

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

4. Disable the reside filter.


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

5. Customise the textual content for AJAX loading standing.


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

6. Customized perform to parse knowledge from ajax request.


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

7. All default choices.


// Present search field
showSearch: true,

// case delicate?
searchCaseSensitive: true,

// Textual content to point out whereas loading ajax request
txtLoading: "Loading...",

// Textual content to point out, if ajax loading fails
txtAjaxFailure: "Error...",

// URL the place to load content material. 
// If worth is just not set, plugin reads content material from choose ingredient
dataUrl: null,

//  Customized perform to parse knowledge from ajax request
dataParser: null

Changelog:

v2.0.1 (2024-08-02)

  • DevDepencency updates
  • Added command to alter dataUrl

v2.0.1 (2024-08-01)

v2.0.0 (2023-01-05)

v2.0.0 (2022-12-07)

  • Up to date packages & deprecated jquery 1.x

v1.0.6 (2018-07-16)

  • Up to date dev bundle variations
  • Recompiled with newer js uglify (this in flip diminished filesize by 7 bytes.. Yay)
  • Replaces tabs from supply

2016-07-09

  • Search case sensitivity can now be set

This superior jQuery plugin is developed by McFizh. For extra Superior Usages, please examine the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments