Dropdown javascript component plugin

A multi purpose responsive option picker with the same codebase across different devices. Different render methods and several initialization features to give to the developer a very flexible data picker to bring a better user experience to their applications.


1

Examples


Simple multiple and autocomplete dropdown

<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="dropdown1"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown1'), {
    data:[
        'City of London',
        'City of Westminster',
        'Kensington and Chelsea',
        'Hammersmith and Fulham', // (...)
        ],
    autocomplete:true,
    multiple:true,
    width:'280px',
});
</script>
</html>

Simple dropdown with groups

<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="dropdown2"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown2'), {
    data:[
        { group:'Breads', id:'1', name:'Wholemeal' },
        { group:'Breads', id:'2', name:'Wholegrain' },
        { group:'Breads', id:'3', name:'White' },
        { group:'Breakfast Cereals', id:'4', name:'High fibre (wholegrain) oats' },
        { group:'Breakfast Cereals', id:'5', name:'Porridge' },
        { group:'Breakfast Cereals', id:'6', name:'Muesli' },
        { group:'Grains', id:'7', name:'Rice' },
        { group:'Grains', id:'8', name:'Barley' },
        { group:'Grains', id:'9', name:'Corn' },
        { group:'Other products', id:'10', name:'Pasta' },
        { group:'Other products', id:'11', name:'Noodles' }
        ],
    width:'280px',
});
</script>
</html>

Dropdown with icon and description

<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="dropdown3"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown3'), {
    data:[
            { id:'1', name:'Paul Hodel', image:'/templates/default/img/1.jpg', title:'Admin' },
            { id:'2', name:'Cosme Sergio', image:'/templates/default/img/2.jpg', title:'Teacher' },
        ],
    width:'280px',
});
</script>
</html>

Methods and events

|



<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<input type='button' value='Open the dropdown' class='plain' onclick='setTimeout(myDropdown.open, 0)'> |
<input type='button' value='Close the dropdown' class='plain' onclick='myDropdown.close()'>

<p><span id='log'></span></p>

<div id="dropdown4"></div>

<script>
myDropdown = jSuites.dropdown(document.getElementById('dropdown4'), {
    data:[
        'JavaScript',
        'Python',
        'Java',
        'C/CPP',
        'PHP',
        'Swift',
        'C#',
        'Ruby',
        'Objective - C',
        'SQL',
    ],
    onchange:function(el,val) {
        document.getElementById('log').innerHTML = 'Dropdown new value is: ' + val;
    },
    onopen:function() {
        document.getElementById('log').innerHTML = 'Dropdown is opened';
    },
    onclose:function() {
        document.getElementById('log').innerHTML = 'Dropdown is closed';
    }
    width:'280px'
});
</script>
</html>

Render mode

The render mode can be define on initialization with type: default, picker or searchbar.

<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="dropdown5"></div>
<div id="dropdown6"></div>

<script>
// EXAMPLE 1 - Render as a searchbar
jSuites.dropdown(document.getElementById('dropdown5'), {
    type:'searchbar',
    data:[
        'City of London',
        'City of Westminster',
        'Kensington and Chelsea',
        'Hammersmith and Fulham', // (...)
        ],
    autocomplete:true
});

// EXAMPLE 2 - For small screen the default option will be type: picker
jSuites.dropdown(document.getElementById('dropdown6'), {
    data: [
        { group:'Breads', id:'1', name:'Wholemeal' },
        { group:'Breads', id:'2', name:'Wholegrain' },
        { group:'Breads', id:'3', name:'White' },
        { group:'Breakfast Cereals', id:'4', name:'High fibre (wholegrain) oats' },
        { group:'Breakfast Cereals', id:'5', name:'Porridge' },
        { group:'Breakfast Cereals', id:'6', name:'Muesli' },
        { group:'Grains', id:'7', name:'Rice' },
        { group:'Grains', id:'8', name:'Barley' },
        { group:'Grains', id:'9', name:'Corn' },
        { group:'Other products', id:'10', name:'Pasta' },
        { group:'Other products', id:'11', name:'Noodles' }
    ],
});
</script>
</html>


2

Methods

open();Open the dropdown
close(ignoreEvents);Close the dropdown
@param int ignoreEvents - Do no execute onclose event
getText();Get the current label(s) from the selected option(s) in the dropdown
getValue();Get the current value(s) from the selected option(s) in the dropdown
setValue(newValue);Set a new value(s)
@param mixed newValue - A string value or an array with multiple values in case a multiple dropdown.
reset();Clear all selected options from the dropdown


3

Events


onopenTrigger a method when the dropdown is opened.
onchangeTrigger a method when value is changed.
oncloseTrigger a method when the dropdown is closed.


4

Initialization options

All javascript options for the dropdown is listed below:

var defaults = {
    // Data to load into the dropdown
    data: [],
    // Can be loaded from a external file
    src:null,
    // Multiple options
    multiple: false,
    // Allow autocomplete
    autocomplete: false,
    // Render type: default, picker, searchbar
    type:null,
    // Default width
    width:'200px',
    // The element should be created opened
    opened:false,
    // Events
    onchange:null,
    onopen:null,
    onclose:null,
    onblur:null,
    // Default value: string value or array of values
    value:null,
    // Placeholder
    placeholder:'',
};