Responsive Dropdown

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

Examples

Dropdown as a Searchbar

<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="dropdown"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown'), {
    type:'searchbar',
    data:[
        'City of London',
        'City of Westminster',
        'Kensington and Chelsea',
        'Hammersmith and Fulham', // (...)
        ],
    autocomplete:true
});
</script>
</html>
import { Dropdown } from 'jsuites/react'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'

function App() {
  const dropdown = useRef(null);
  return (
    <div className="App">
      <Dropdown ref={dropdown} type={'searchbar'} data={[
        'City of London',
        'City of Westminster',
        'Kensington and Chelsea',
        'Hammersmith and Fulham', // (...)
      ]} autocomplete={true}>
      </Dropdown>
    </div>
  );
}
export default App;

Dropdown as mobile item picker

<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="dropdown"></div>

<script>
// EXAMPLE 2 - For small screen the default option will be type: picker
jSuites.dropdown(document.getElementById('dropdown'), {
    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>
import { Dropdown } from 'jsuites/react'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'

function App() {
  const dropdown = useRef(null);
  return (
    <div className="App">
      <Dropdown ref={dropdown} 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' }
        ]}>
      </Dropdown>
    </div>
  );
}
export default App;