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>