AutoComplete Material-UI case insensitive filter

On an input field we were trying to show an autocomplete using Material-UI. It worked out of the box as soon as we wrote the following AutoComplete code inside JSX:

    <MuiThemeProvider>
        <AutoComplete
        floatingLabelText="Search stock"
        onNewRequest={this.handleNewRequest}
        openOnFocus={true}
        dataSource={data source goes here}
        fullWidth
        dataSourceConfig={data config goes here}/>
   </MuiThemeProvider>

Our auto complete shows right away but the filter was not case insensitive. Our requirement was to have the filter case insensitive. That means user should be able to type both uppercase and lowercase letter to find the match in autocomplete. It was not working case insensitive way.

We had to add a filter to make it case insensitive. Following filter worked for us:

filter={AutoComplete.fuzzyFilter}

Following is the complete call of autocomplete:

    <MuiThemeProvider>
        <AutoComplete
        floatingLabelText="Search stock"
        filter={AutoComplete.fuzzyFilter}
        onNewRequest={this.handleNewRequest}
        openOnFocus={true}
        dataSource={data source goes here}
        fullWidth
        dataSourceConfig={data config goes here}/>
    </MuiThemeProvider>
Share