Select Boxes Replacement Plugin Select2 - Free Download Select Boxes Replacement Plugin For jQuery - Select2

Free Download Select Boxes Replacement Plugin For jQuery – Select2

Posted on

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.

Select Boxes Replacement Plugin Select2 - Free Download Select Boxes Replacement Plugin For jQuery - Select2
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:

You might also like:

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