The params object dosen't seem to be working with InputBase. I also tried ref={params.inputProps}. Im using the googleplaces autocomplete
<Autocomplete
id="combo-box-demo"
options={autocomplete}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} />} // InputBase instead of TextField
/>
You just have to spread out the params. The params includes InputLabelProps and InputProps, so you have to separate those out from the rest, and spread the InputProps back in.
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => {
const {InputLabelProps,InputProps,...rest} = params;
return <InputBase {...params.InputProps} {...rest} />}}
/>
Working demo: https://codesandbox.io/s/material-demo-forked-6yhsk?file=/demo.tsx
Related
We are using react-number-format (###)-###-####' for phone number formatting and Autocomplete component from #material-ui. So, how to integrate react-number-format within a Autocomplete component so that when the user searches for the phone number for eg. '1234567899' it gets auto converted to this format '(123)-456-7899'.
Have implemented the code as below. Any suggestions would be highly appreciated.
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
classes={{
option: classes.option
}}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
<NumberFormat formate = '(###)-###-####' mask="_" prefix={'01'} />;
<Autocomplete
id="grouped-demo"
options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
groupBy={(option) => option.firstLetter}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="With categories" variant="outlined" />}
/>
Above example code from material UI https://material-ui.com/components/autocomplete/#grouped
Here how can i achieve nested group
I am using AutoComplete API of material UI. there is an object of top100Films which contains the title and year of movies. My autocomplete works fine if i search with top100Film.title as shown in code
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title} // <--
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
But if i want to search the movies with top100Films.year then i get an error message
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.year}//<--
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
candidate.toLowerCase is not a function. (In 'candidate.toLowerCase()', 'candidate.toLowerCase' is undefined)
How can i use any other data field except .title
the code is in Link
getOptionLabel should return string while top100Films.year returns a number. change the getOptionLabel as below and it'll work fine:
getOptionLabel={(option) => option.year.toString()}
sandbox
need cast year in to string codesandbox
How is possible to add onClick event on the options - i mean when u click the selected option i want to link somewhere, not to just put in the searchField(or textField)? I search really hard on the web, but i just cant find how to do that.
<Autocomplete
freeSolo
classes={classes}
options={searchItems}
getOptionLabel={(option) =>
option.title ? option.title : option.name
}
style={{ width: 300, borderRight: "none", borderLeft: "none" }}
renderInput={(params) => {
return (
<TextField
{...params}
variant="outlined"
fullWidth
placeholder="Search for movie, tv or person"
value={value}
onChange={(e) => handleChange(e)}
/>
);
}}
/>
You need to move the onChange function inside the Autocomplete component as below:
<Autocomplete
id="combo-box-demo"
classes={classes}
options={searchItems}
getOptionLabel={(option) =>
option.title ? option.title : option.name
}
style={{ width: 300, borderRight: "none", borderLeft: "none" }}
onChange={(e, value) => console.log(e.target, value.title)}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
Here is an example that I have created. When the onChange function in the Autocomplete component is triggered, it displays values on the console. According to the doc, onchange function here pass three props called event, value and reason.
I am using material ui in reactjs.
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => {
console.log(option)
return option.title
}
}
style={{ width: "100%" }}
onInputChange ={(event) => testMethod(event)}
renderInput={(params) => <TextField {...params} label="Search here" variant="outlined" />}
/>
I have Following Issues:
How to get the searched input value
To show dropdown only after typing search text
Filter options based on search input