Searchable Multi Select Plugin With jQuery Select Picker - Download Searchable Multi Select Plugin With jQuery - Select Picker

Download Searchable Multi Select Plugin With jQuery – Select Picker

By Posted on

This time I will share jQuery Plugin and tutorial about Searchable Multi Select Plugin With jQuery – Select Picker, hope it will help you in programming stack.

Searchable Multi Select Plugin With jQuery Select Picker - Download Searchable Multi Select Plugin With jQuery - Select Picker
File Size: 94 KB
Views Total: 11597
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Select Picker is a jQuery plugin which converts any select box into a single option picker or a filterable, multi-select tagging / tokenizer input.

How to use it:

1. Add jQuery library and the jQuery select picker plugin’s files into your webpages.

view source
1 <link href="dist/picker.css" rel="stylesheet">
2 <script src="//code.jquery.com/jquery.min.js"></script>
3 <script src="dist/picker.min.js"></script>

2. The JavaScript to replace the native select box.

view source
01 <select name="basic" id="basic">
02   <option value="" disabled hidden>Select value</option>
03   <option value="1">HTML5</option>
04   <option value="2">CSS3</option>
05   <option value="3">JavaScript</option>
06   <option value="4">ReactJS</option>
07   <option value="5">React Native</option>
08   <option value="6">AngularJS</option>
09   <option value="7">Node.js</option>
10   <option value="8">jQuery Script</option>
11 </select>
view source
1 $('#basic').picker();

3. Create a filterable, multi-select tags input.

view source
01 <select name="multi" id="multi"  multiple>
02   <option value="" disabled hidden>Select value</option>
03   <option value="1">HTML5</option>
04   <option value="2">CSS3</option>
05   <option value="3">JavaScript</option>
06   <option value="4">ReactJS</option>
07   <option value="5">React Native</option>
08   <option value="6">AngularJS</option>
09   <option value="7">Node.js</option>
10   <option value="8">jQuery Script</option>
11 </select>
view source
1 $('#multi').picker({
2   search : true
3 });

4. Assign custom CSS classes to options.

view source
1 var classes = {
2     1 : 'class-1',
3     2 : 'class-2',
4     3 : 'class-3'
5 };
6 $('#multi').picker({
7   search : true,
8   coloring: classes
9 });
view source
1 .class-1 { ... }
2  
3 .class-2 { ... }
4  
5 .class-3 { ... }

5. More configuration options.

view source
01 $('#el').picker({
02  
03   // css for container
04   containerClass: '',
05  
06   // container' width
07   containerWidth: false,
08  
09   // select's width
10   width: false,
11  
12   // filterable
13   search: false,
14  
15   // auto focus
16   searchAutofocus: false,
17  
18   // modify the position to which the window is scrolled
19   autofocus<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>Offset: 0,
20  
21   // assign custom css classes to options
22   coloring: {},
23  
24   // custom text
25   texts: {
26       trigger : "Select value",
27       noResult : "No results",
28       search : "Search"
29   }
30    
31 });

6. The API method to select an option manually.

view source
1 $('#el').picker('set', 3);

7. Fire an event after you picked an option.

view source
1 var $elem = $('#el');
2 $elem.picker();
3 $elem.on('sp-change', function(){
4   alert('Event');
5 });

Changelog:

2018-12-06

  • v0.3.2: Bugfix

2016-09-11

  • v0.3.1

This awesome jQuery plugin is developed by AuHau. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

Related posts: