Versatile jQuery Zepto Selection Library select3 - Free Download Versatile jQuery/Zepto Selection Library - Selectivity

Free Download Versatile jQuery/Zepto Selection Library – Selectivity

By Posted on

This time I will share jQuery Plugin and tutorial about Versatile jQuery/Zepto Selection Library – Selectivity, hope it will help you in programming stack.

Versatile jQuery Zepto Selection Library select3 - Free Download Versatile jQuery/Zepto Selection Library - Selectivity
File Size: 189 KB
Views Total: 17634
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Selectivity (select3) is a jQuery/Zepto/React/Vanilla JavaScript alternative to Select2 that helps you create versatile & highly configurable select/input elements with the following features:

  • Searchable dropdown select list.
  • Multiple select.
  • AJAX enabled.
  • Filterable items.
  • Tags/tokens input.
  • Custom data type.
  • Custom templates.

Installation:

view source
1 # Yarn
2 yarn add selectivity
3  
4 # NPM
5 $ npm install selectivity

How to use it:

1. Include jQuery JavaScript library and the jQuery Selectivity plugin’s CSS & JavaScript in the document.

view source
1 <!-- As A Vanilla JS Plugin -->
2 <link href="/path/to/selectivity.min.css" rel="stylesheet">
3 <script src="/path/to/selectivity.min.js"></script>
4  
5 <!-- As A jQuery Plugin -->
6 <link href="/path/to/selectivity-jquery.min.css" rel="stylesheet">
7 <script src="/path/to/jquery.min.js"></script>
8 <script src="/path/to/selectivity-jquery.min.js"></script>

2. Include the Font Awesome Iconic Font for essential icons.

view source
1 <link href="font-awesome.min.css" rel="stylesheet">

3. Create an empty container to place the Selectivity component.

view source
1 <span id="demo" class="example"></span>

4. Initialize the Selectivity component and define the data as follows:

view source
1 $('#demo').selectivity({
2   items: ['Item 1', 'Item 2', 'Item 3']
3 });

5. You can also directly initialize the plugin on a select element.

view source
1 $('select').selectivity({
2   // options here
3 });

6. Option group (nested list) is supported as well.

view source
01 // option group
02 $('#demo').selectivity({
03   items: [{
04       text: 'Item 1',
05       children: [ { id: 1, text: 'Item 1.1' } ]
06     },{
07       text: 'Item 2',
08       children: [ { id: 2, text: 'Item 2.1' } ]
09     },{
10       text: 'Item 3',
11       children: [ { id: 3, text: 'Item 3.1' } ]
12     }]
13 });
14  
15 // context menu
16 $('#demo').selectivity({
17   items: [{
18       id: '1',
19       text: 'Item 1',
20       submenu: {
21         items: [{ id: 2, text: 'Submenu 1' }],
22         showSearchInput: true
23       }
24     },{
25       id: '3',
26       text: 'Item 2',
27       submenu: {
28         items: [{ id: 4, text: 'Submenu 2' }],
29         showSearchInput: true
30       }
31     }]
32 });

7. Or load the data from an external data source:

view source
01 $('#demo').selectivity({
02   ajax: {
03     url: 'https://api.github.com/search/repositories',
04     minimumInputLength: 3,
05     quietMillis: 250,
06     params: function(term, offset) {
07         // GitHub uses 1-based pages with 30 results, by default
08         return { q: term, page: 1 + Math.floor(offset / 30) };
09     },
10     fetch: function(url, init, queryOptions) {
11         return $.ajax(url).then(function(data) {
12             return {
13                 results: $.<a href="https://www.jqueryscript.net/tags.php?/map/">map</a>(data.items, function(item) {
14                     return {
15                         id: item.id,
16                         text: item.name,
17                         description: item.description
18                     };
19                 }),
20                 more: (data.total_count > queryOptions.offset + data.items.length)
21             };
22         });
23     }
24   },
25   placeholder: 'Search for a repository',
26   templates: {
27     resultItem: function(item) {
28         return (
29             '<div class="selectivity-result-item" data-item-id="' + item.id + '">' +
30                 '<b>' + escape(item.text) + '</b><br>' +
31                 escape(item.description) +
32             '</div>'
33         );
34     }
35   }
36 });

8. All configuration options.

  • ajax: Load items through AJAX requests.
  • allowClear: Set to true to allow the selection to be cleared. This option only applies to single-value inputs.
  • backspaceHighlightsBeforeDelete: If set to true, when the user enters a backspace while there is no text in the search field but there are selected items, the last selected item will be highlighted and when a second backspace is entered the item is deleted. If false, the item gets deleted on the first backspace. The default value is true on devices that have touch input and false on devices that don’t.
  • closeOnSelect: Set to false to keep the dropdown open after the user has selected an item. This is useful if you want to allow the user to quickly select multiple items. The default value is true.
  • createTokenItem: Function to create a new item from a user’s search term. This is used to turn the term into an item when dropdowns are disabled and the user presses Enter. It is also used by the default tokenizer to create items for individual tokens. The function receives a token parameter which is the search term (or

    source : jquery.net

    Related posts: