Topic: Set a default value to MDBAutocomplete component
cariforef priority asked 2 years ago
Expected behavior I develop a search engine. So I can use the Autocomplete component when i run a new search. But I want to modify my current search. So How can I fill the input field generated by the MDBAutocomplete component to set it's default value with a string.
How can I set the default Value or the displayValue in a useffect({},[]) ?
Resources (screenshots, code snippets etc.)
<MDBAutocomplete
className="m-3"
size="lg"
contrast
id="inputText"
name="inputText"
threshold={3}
noResults="Aucun résultat"
label="Rechercher"
// defaultValue={searchQuery.inputText}
onChange={handleInputTextChanged}
displayValue={(value: any) => {
console.log(inputText);
return value.term.replace(/(<([^>]+)>)/gi, "").toLowerCase();
}}
dataFilter={autoComplete}
itemContent={(result) => (
<div
dangerouslySetInnerHTML={{ __html: result.term.toLowerCase() }}
/>
)}
/>
thanks.
Krzysztof Wilk staff answered 2 years ago
Hi!
You can just create a controlled input, store its value in a state, and adjust it wherever you need. Note you have to provide also an onSelect
handler to update it when the user chooses an option from the list. I created a simple example, you can check it below :)
import React, { useEffect, useState } from "react";
import {
MDBAutocomplete,
MDBContainer,
MDBRow,
MDBCol,
} from "mdb-react-ui-kit";
const data = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"];
export default function App() {
const [inputValue, setInputValue] = useState("");
const handleChange = (e) => setInputValue(e.target.value);
const handleSelect = (value) => setInputValue(value);
useEffect(() => {
if (inputValue.length < 4) return;
setInputValue("Default");
});
return (
<MDBContainer className="mt-5">
<MDBRow className="justify-content-center mt-5">
<MDBCol md="10">
<MDBAutocomplete
value={inputValue}
onChange={handleChange}
onSelect={handleSelect}
className="m-3"
size="lg"
contrast
id="inputText"
name="inputText"
threshold={3}
noResults="Aucun résultat"
label="Rechercher"
dataFilter={(value) => {
return data.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
}}
/>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 4.1.0
- Device: mac
- Browser: Chrome
- OS: 15
- Provided sample code: No
- Provided link: No