Implement custom search with custom label using react-select
Today, we will show you how to implement custom search with custom label using react-select. In the past article, we have added an icon in the react-select dropdown. But when you search for the label then you can’t search the item. So we have to implement the custom search using different key.
Demo Application
Custom search with custom label using react-select
1. Add custom label in react-select dropdown
Refer to the following article to implement react-select dropdown in React Application.
How to add an icon in the react-select dropdown
2. Implement custom search
To implement custom search, we have to use filterOption property of the react-select package where you can write your custom logic to filter the dropdown items.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function App() { ... ... const filterOption = (option, inputValue) => { return option.data.text.toLowerCase().includes(inputValue.toLowerCase()); } return ( <Select ... ... filterOption={filterOption} /> ); } |
3. Output
Let’s combine all the code together and see how it looks.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | import React, { useState } from 'react'; import Select from 'react-select'; function App() { const data = [ { value: 1, text: 'Up Arrow', icon: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z" /> </svg> }, { value: 2, text: 'Down Arrow', icon: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z" /> </svg> }, { value: 3, text: 'Left Arrow', icon: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z" /> </svg> }, { value: 4, text: 'Right Arrow', icon: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" /> </svg> } ]; const [selectedOption, setSelectedOption] = useState(null); // handle onChange event of the dropdown const handleChange = e => { setSelectedOption(e); } // handle custom filter const filterOption = (option, inputValue) => { return option.data.text.toLowerCase().includes(inputValue.toLowerCase()); } return ( <div className="App"> <b>Custom search in react-select dropdown - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></b><br /><br /> <Select placeholder="Select Option" isClearable={true} value={selectedOption} options={data} onChange={handleChange} getOptionLabel={e => ( <div style={{ display: 'flex', alignItems: 'center' }}> {e.icon} <span style={{ marginLeft: 5 }}>{e.text}</span> </div> )} filterOption={filterOption} /> {selectedOption && <div style={{ marginTop: 20, lineHeight: '25px' }}> <b>Selected Option:</b> {selectedOption.value} </div>} </div> ); } export default App; |
Run the project and check the output in the browser.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
