Open In App

How to add styles to autocomplete in ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Autocomplete functionality in web applications is common for predictive user input. This article focuses on enhancing the visual appearance of ReactJS autocomplete components using Material-UI’s package, offering customization options for seamless integration with the overall application design.

Prerequisites:

Approach: 

  • On the Autocomplete element, className doesn’t apply to the text input as you might expect. You can’t use the className on the autocomplete component, you have to use the inputProps property.
  • The inputProps is commonly used for (but not limited to) placeholder, event handlers (onFocus, onBlur, etc.), autoFocus, etc.
  • You can customize the styles in inputProps in the above code.
  • In the renderItem prop, you can add style as a set of styles that can be applied to improve the look of the items in the dropdown menu.

Steps to Create the React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app materialuiTable

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd materialuiTable

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install --save react-autocomplete

Project Structure:

Project Structure

package.json:

  "dependencies": {
"react-autocomplete": "^1.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file

Javascript




import React, { useState } from 'react'
import Autocomplete from 'react-autocomplete'
 
function App() {
 
    // Defining a state named value, which
    // we can update by calling setValue
    // Value will store the typed value or
    // selected suggestion by the user
    const [value, setValue] = useState('');
 
    return (
        <div style={{
            display: 'flex', flexDirection: 'column',
            alignItems: 'center'
        }}>
            <div>
                {/* Inline css*/}
                <h4 style={{
                    padding: '15px',
                    border: '13px solid #b4f0b4',
                    color: 'rgb(11, 167, 11)'
                }}>
                    Geeks for Geeks : React
                    Autocomplete Component Styling
                </h4>
            </div>
            <div>
                <Autocomplete
 
                    // Items is the list of suggestions
                    // displayed while the user type
                    items={[
                        { label: 'C++' },
                        { label: 'C' },
                        { label: 'Python' },
                        { label: 'JavaScript' },
                        { label: 'Julia' },
                        { label: 'Java' },
                        { label: 'Objective C' },
                        { label: 'C#' },
                        { label: 'Dart' },
                        { label: 'Perl' }
                    ]}
 
                    // To handle the case that when
                    // the user type, suggested
                    // values should be independent
                    // of upper or lower case
                    shouldItemRender={(item, value
                    ) => item.label.toLowerCase()
                        .indexOf(value.toLowerCase()) > -1}
                    getItemValue={item => item.label}
                    renderItem={(item, isHighlighted) =>
                        // Styling to highlight selected item
                        <div style={{
                            background: isHighlighted ?
                                '#bcf5bc' : 'white'
                        }}
                            key={item.id}>
                            {item.label}
                        </div>
                    }
                    value={value}
 
                    // The onChange event watches for
                    // changes in an input field
                    onChange={e => setValue(e.target.value)}
 
                    // To set the state variable to value
                    // selected from dropdown
                    onSelect={(val) => setValue(val)}
 
                    // Added style in Autocomplete component
                    inputProps={{
                        style: {
                            width: '300px', height: '20px',
                            background: '#e4f3f7',
                            border: '2px outset lightgray'
                        },
                        placeholder: 'Search language'
                    }}
                />
            </div>
        </div>
    );
}
 
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000

Autocomplete on select language



Last Updated : 23 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads