Customize Material UI Autocomplete Style With Examples – MUI

Breif About Material UI AutoComplete feature and types

Material UI AutoComplete is the advanced version of Select dropdown field. It can be used in two ways Free Solo and Combo Box.

Free Solo – This type allows the user to select any arbitrary value by typing in the autocomplete text field but it is recommended to show possible values to the user through the list.

Combo Box – It restricts the user to choose only those values which are predefined set of values. If the user types any arbitrary value then that value will disappear once the user move away from the field and leaves the focus. These predefined values also ensure that user will always select the valid input for the autocomplete field.

We will see the different uses and custom styles of the two types of AutoComplete in the below examples.All the given example will work with the latest version MUI v5.

CUSTOMIZING THE DIFFERENT NESTED COMPONENTS OF THE MATERIAL UI AUTOCOMPLETE

1. HOW TO CUSTOMIZE THE MUI AUTOCOMPLETE DROPDOWN MENU

We can change the dropdown menu style using

PaperComponent prop of Autocomplete ,Paper component of mui with the sx props for styling the dropdown menu.

2. HOW TO SELECT THE MULTIPLE VALUES AND CHANGE THE STYLE OF MATERIAL UI AUTOCOMPLETE INPUT TAGS OR CHIPS

If we want to select multiple options from dropdown in autocomplete then we need to use the multiple prop.

To change the style of tags used to display multiple values , we need to use the renderTags prop and customize the tag style using the MUI Chip component as shown below.

We can change the default delete icon or clear button using the deleteIcon prop and use our own Icon.

3. HOW TO STYLE THE AUTOCOMPLETE FIELD BORDER

We have to style the fieldset inside the TextField Component of AutoComplete to change the border style or to make other style changes like changing the background color etc.

4. HOW TO MAKE THE AUTOCOMPLETE TEXT FIELD WHICH CAN ACCEPT MULTIPLE ARBITRARY VALUES WITHOUT SHOWING THE DROPDOWN MENU

We can achieve this feature using autocomplete FreeSolo type. We can create a simple text field where we can type any value and press enter and then again type and press enter and so on to choose multiple values. There is no need to show the drop down to the user.

We will have to pass the empty array to the options prop to not to show the menu items.

5. HOW TO RESTRICT THE USER TO TYPE INPUT OF A FIXED MAXIMUM LENGTH AND DISABLE THE ENTER ONCE THE MAX LIMIT REACHES

If we are using the freesolo type like we used in the above example no.4 and we want to let the user type only the string of length 10 then we can restrict it by disabling the enter key.

We will use onKeyDown event to capture the key press for input length and capturing the enter key press and prevent the user to press enter using the defaultMuiPrevented.

Similarly, we can put the check of min and max date selection from the date calendar in input type=’date’

6. HOW TO CUSTOMIZE THE FILTER OPTIONS IN MUI AUTOCOMPLETE

Suppose we have an array of options for Autocomplete options prop which has the following structure

{ id: 101, item_name: “football”, price: “2000” }
 
 
Now we are showing only the item_name in the dropdown. To search any item from the list we need to type the item_name in the autocomplete field.This is the default behaviour.
 

Sometimes we come across a use case where we need to use multiple properties of an item to search from the list.

Like in the above example if somebody wants to search the item using the id or price values then autocomplete will not allow to do that until we use the prop know as filterOptions.

In filterOptions prop we will provide the filter method known as createFilterOptions(can be imported from mui library) to change the default filter option behaviour.

You can test the below example. It will allow you to search the item using any of the three properties(id,item_name,price) provided in the option list.

IMPORTANT NOTE:-

Make sure that you do not return the number in the stringify inside the createFilterOptions method otherwise you will get the error because it uses the built in string methods like toLowerCase()

Suppose if you only return the id and typeof id is a number , it will throw an error. But if you are passing id along with the item_name by appending it using ‘+’ then there will be no error because it will convert the number into a string because you have concatenated a string with a number.

 

MUI OFFICIAL PAGE

Leave a Reply

Your email address will not be published. Required fields are marked *