This time I will share jQuery Plugin and tutorial about Select Boxes Replacement Plugin For jQuery – Select2, hope it will help you in programming stack.
| File Size: | 2.55 MB |
|---|---|
| Views Total: | 20798 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Select2 is a JavaScript based select box replacement to create dynamic, AJAX-enabled, customizable dropdown select on the web app.
It supports searching, remote data sets, and infinite scrolling of results. jQuery is optional.
Additional Themes:
- bootstrap-theme: Select2 Theme for Bootstrap 3
- bootstrap4-theme: Select2 Theme for Bootstrap4
- select2-flat-theme: Select2 Theme for Flat UI
You might also like:
- Form Select Element Replacement Plugin – Mighty Form Styler
- Default Checkbox Replacement Plugin – jQuery prettyCheckable
- Standard Select Form Replacement Plugin – Selectik
- jQuery Plugin For Custom Tags Input and Select Box – selectize.js
- jQuery Plugin For Custom Select Menus
- jQuery Multiple Select Element Replacement Plugin – selectlist
- Beautiful Select Element Replacement Solution with jQuery and CSS3
- Simple Stylizable Select Input Plugin with jQuery – Brute Select
- jQuery Plugin For Customizable Select Box – selectify
- 10 Best Multiple Select Plugins
Features:
- Working with large datasets: Chosen requires the entire dataset to be loaded as option tags in the DOM, which limits it to working with small-ish datasets. Select2 uses a function to find results on-the-fly, which allows it to partially load results.
- Paging of results: Since Select2 works with large datasets and only loads a small amount of matching results at a time it has to support paging. Select2 will call the search function when the user scrolls to the bottom of currently loaded result set allowing for the ‘infinite scrolling’ of results.
- Custom markup for results: Chosen only supports rendering text results because that is the only markup supported by optiontags. Select2 provides an extension point which can be used to produce any kind of markup to represent results.
- Ability to add results on the fly: Select2 provides the ability to add results from the search term entered by the user, which allows it to be used for tagging.
- Mutiple languages.
How to use it:
1. Install & Import.
1 |
# NPM |
2 |
$ npm install select2 --save |
2. Download and load the Select2 plugin’s files in the document.
1 |
<link href="/path/to/select2.min.css" rel="stylesheet"> |
2 |
<script src="/path/to/jquery.min.js"></script> |
3 |
<script src="/path/to/select2.min.js"></script> |
3. Load a language JS as per your needs. You can find all the languages under the i18n folder.
1 |
<script src="/path/to/i18n/de.js"></script> |
4. Call the main function on the select element and done.
1 |
<select class="demo"> |
2 |
Options here |
3 |
</select> |
1 |
$('.demo').select2(); |
5. Customize the plugin using the following options.
001 |
// language folder |
002 |
amdLanguageBase: './i18n/', |
003 |
004 |
/* sets the data sources to fetch via AJAX |
005 |
ajax: { |
006 |
url: '/path/to/data', |
007 |
dataType: 'json' |
008 |
// Additional AJAX parameters |
009 |
} |
010 |
*/ |
011 |
ajax: null, |
012 |
013 |
// enable/disable autocomplete |
014 |
autocomplete: 'off', |
015 |
016 |
// allows clearable selections |
017 |
allowClear: false, |
018 |
019 |
// closes the dropdown after selection |
020 |
closeOnSelect: true, |
021 |
022 |
// CSS class for the container |
023 |
containerCss: '', |
024 |
containerCssClass: '', |
025 |
026 |
// renders dropdown options from an array. |
027 |
data: null, |
028 |
029 |
// enables debug mode |
030 |
debug: false, |
031 |
032 |
// or 'rtl' |
033 |
dir: 'ltr', |
034 |
035 |
// is disabled? |
036 |
disabled: false, |
037 |
038 |
// automatically sets the width of the dropdown |
039 |
dropdownAutoWidth: false, |
040 |
041 |
// CSS class for the dropdown |
042 |
dropdownCssClass: '', |
043 |
044 |
// customizes the parent container |
045 |
dropdownParent: null, |
046 |
047 |
// sets the language |
048 |
language: 'en', |
049 |
050 |
// the maximum number of characters for the search term |
051 |
maximumInputLength: 0, |
052 |
053 |
// // the maximum number of options allowed to select |
054 |
maximumSelectionLength: 0, |
055 |
056 |
// the maximum number of characters to trigger the search |
057 |
minimumInputLength: 0, |
058 |
059 |
// the minimum number of results required to display the search box |
060 |
minimumResultsForSearch: 0, |
061 |
062 |
// enables multiple selection |
063 |
multiple: false, |
064 |
065 |
// placeholder |
066 |
placeholder: null |
067 |
068 |
// auto selection when the dropdown is closed. |
069 |
selectOnClose: false, |
070 |
071 |
// auto scrolla fter select |
072 |
scrollAfterSelect: false, |
073 |
074 |
// enables free text responses |
075 |
tags: false, |
076 |
077 |
// customizes the way that search results are rendered |
078 |
templateResult: function (result) { |
079 |
return result.text; |
080 |
}, |
081 |
082 |
// customizes the way that selections are rendered |
083 |
templateSelection: function (selection) { |
084 |
return selection.text; |
085 |
}, |
086 |
087 |
// or 'classic' |
088 |
theme: 'default', |
089 |
090 |
// customize the width of the dropdown |
091 |
width: null, |
092 |
093 |
// Handles automatic escaping of content rendered by custom templates |
094 |
escapeMarkup: function(){}, |
095 |
096 |
// handles custom search matching. |
097 |
matcher: callback, |
098 |
099 |
// handles data sorting. |
100 |
sorter: function (data) { |
101 |
return data; |
102 |
}, |
103 |
104 |
// handles automatic tokenization of free-text entry. |
105 |
tokenizer: function() {}, |
106 |
