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>
  );
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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