Skip to main content

React Multi Select Dropdown with Instant Search

Updated on: coderszine team React, Tutorial

In our previous React tutorial, we have explained how to create React Select Dropdown List using REST API. In this tutorial, we will explain how to create React Multi Select Dropdown with Dynamic Instant Search.

The multi select dropdown is a very user friendly feature that allows users to select multiple items from list to get details of many records.

Here in this tutorial, we will use react-select package for creating multi-select dropdown with instant search. We will load dynamic data to dropdown list by making HTTP API request to https://reqres.in/api/users using react axios package. We will also display multiple selected records dynamically.

So let’s start with tutorial to create React Multi Select Dropdown using REST API.

Prerequisites

Needs to check below points before proceeding with this tutorial.

  • Yarn/npm installed.
  • Node v20.5.1
  • NPM Version 8.19.1
  • Basic knowledge of HTML, JavaScript (ES6), and CSS.

Create React Application

First we will create React application using the create-react-app command. Here we will create multi-select-applicaion to implement multi select dropdown instant dynamic search.

npx create-react-app multi-select-applicaion

Now we will go inside project folder.

cd multi-select-applicaion

Install Required Packages

Now we will install required react packages to use in our application.

We will install react-select package for creating dropdown list.

npm install react-select --save

##### or #####

yarn add react-select

we will install axios package for making http client to make HTTP request to API.

npm install axios –save

# or

yarn add axios

We will also install bootstrap package as we will handle HTML design using Bootstrap framework.

npm install bootstrap --save

##### or #####

yarn add bootstrap

Create API Client Component

We will create a component file src/Api.js and import axios package. We will create an instance with all default parameters. We will set the default baseurl in Axios with API url. We will import Api.js file in our application where we need to make an API call.

import axios from 'axios';

export default axios.create({
		baseURL: 'https://reqres.in/api',
		headers: {
	},
});

Implement React Multi Select Dropdown

Now finaly we will make changes into src/app.js file. We will import installed packages and also Api component to make API request. 

import React,{ useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import api from './Api'
import AsyncSelect from 'react-select/async';

We will create App() function and implement fetchData to make API request and get response. We will load response data in select droddown list. We will add isMulti attribute to select list make multi select dropdown.

function App() {
  
  const fetchData = () => {
    return  api.get('/users').then(result => {
      const res =  result.data.data;
      return res;
    });
  }

return ( 
	<div className="container"> 
		<h2>React Multi Select Dropdown with Dynamic Search</h2>  
		<div className="row">
			<div className="col-md-4"> </div>
		</div>
		<div className="row">
		  <div className="col-md-4"></div>
		  <div className="col-md-12">
			<AsyncSelect
			cacheOptions
			defaultOptions
			value={selectedEmployee}
			getOptionLabel={e => e.first_name + ' ' + e.last_name}
			getOptionValue={e => e.id}
			loadOptions={fetchData}
			onInputChange={handleInputChange}
			onChange={handleChange}
			isMulti
		  />
		  </div>
		  <div className="col-md-4"></div>
		</div>
		<br />
		</div>
 );
}
export default App

We will also implement select dropdown events.

const [items, setItems] = useState([]);
  const [inputValue, setValue] = useState('');
  const [selectedEmployee, setSelectedValue] = useState(null);

  const handleInputChange = value => {
    setValue(value);
  };

  const handleChange = value => {
    setSelectedValue(value);
  }

  const fetchData = () => {
    return  api.get('/users').then(result => {
      const res =  result.data.data;
      return res;
    });
  }

We will display multiple selected records details.

{selectedEmployee ? selectedEmployee.map(employee => {
return (
	<div key={employee.id}>
		<div className="row userDetails">
			<div className="col-md-2 img">
				<img src={employee.avatar} className="img-rounded"/>
			</div>				  
			<div className="col-md-4">						
				<h5>{ employee.first_name} { employee.last_name}</h5>
				<small><cite title="Source Title">  { employee.email }<i className="icon-map-marker"></i></cite></small>							 
			</div>					
		</div>
		<hr />
	</div>			
 );
}):<p>No record found.</p>}

Blow is complete code of App.js file:

import React,{ useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import api from './Api'
import AsyncSelect from 'react-select/async';

function App() {
  const [items, setItems] = useState([]);
  const [inputValue, setValue] = useState('');
  const [selectedEmployee, setSelectedValue] = useState(null);

  const handleInputChange = value => {
    setValue(value);
  };

  const handleChange = value => {
    setSelectedValue(value);
  }

  const fetchData = () => {
    return  api.get('/users').then(result => {
      const res =  result.data.data;
      return res;
    });
  }

return (
  <div className="container"> 
	<h2>React Multi Select Dropdown with Dynamic Search</h2>  
	<div className="row">
		<div className="col-md-4"> </div>
	</div>
	<div className="row">
	  <div className="col-md-4"></div>
	  <div className="col-md-12">
		<AsyncSelect
		cacheOptions
		defaultOptions
		value={selectedEmployee}
		getOptionLabel={e => e.first_name + ' ' + e.last_name}
		getOptionValue={e => e.id}
		loadOptions={fetchData}
		onInputChange={handleInputChange}
		onChange={handleChange}
		isMulti
	  />
	  </div>
	  <div className="col-md-4"></div>
	</div>
	<br />
		
	{selectedEmployee ? selectedEmployee.map(employee => {
	return (
		<div key={employee.id}>
			<div className="row userDetails">
				<div className="col-md-2 img">
					<img src={employee.avatar} className="img-rounded"/>
				</div>				  
				<div className="col-md-4">						
					<h5>{ employee.first_name} { employee.last_name}</h5>
					<small><cite title="Source Title">  { employee.email }<i className="icon-map-marker"></i></cite></small>							 
				</div>					
			</div>
			<hr />
		</div>			
	 );
	}):<p>No record found.</p>}
	 
  </div>
 );
}
export default App

Run Application

We will execute below command to run our application.

npm start

The application will be available on following url in borowser:

http://localhost:3000/