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
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'} />;
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.
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
I have been using material-ui's autocomplete in freeSolo mode. I would like to show a loading text while options are being loaded. It isn't working as expected currently. But loading text is shown when freeSolo is disabled. The same behaviour is seen for no-options text also. Is it possible to show loading and no options text in freeSolo mode?
Ref: https://codesandbox.io/s/material-demo-mqtk8
In the above example, if freeSolo is set as false, loading text and no options text is shown as expected.
Using this prop loadingText can you set your own loading text.
You can see this MaterialUi documentation, here is the link Material UI AutoComlete API
<Autocomplete
freeSolo
id="asynchronous-demo"
style={{ width: 300 }}
open={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
getOptionSelected={(option, value) => option.name === value.name}
getOptionLabel={(option) => option.name}
options={options}
loading={loading}
loadingText="Your loading text here"
renderInput={(params) => (
<TextField
{...params}
label="Asynchronous"
fullWidth
variant="outlined"
InputProps={{
...params.InputProps,
endAdornment: (
<React.Fragment>
{loading ? (
<CircularProgress color="inherit" size={20} />
) : null}
{params.InputProps.endAdornment}
</React.Fragment>
)
}}
/>
)}
/>