Responsive JavaScript Dropdown

Implement a fully responsive JavaScript dropdown that adapts to mobile devices. During initialization, the dropdown's render mode can be tailored to suit various use cases, with options including default, picker, or searchbar.

Example

Dropdown as a Searchbar

In this example, the dropdown is initialized as a searchbar, enhancing the user experience by allowing for easy search and selection within a compact, mobile-friendly interface.

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/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

You can initialise the dropdown with the picker mode to create a floating, responsive option picker optimized for mobile applications. This mode presents a user-friendly, touch-optimized interface ideal for mobile devices.

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/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;

Edit this page on GitHub