Star

Responsive options

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







Source code

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

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

<script>
// EXAMPLE 1 - Render as a searchbar
jSuites.dropdown(document.getElementById('dropdown1'), {
    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('dropdown2'), {
    type:'picker',
    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>