How to do async search from API with MDB-Select and embedded

Topic: How to do async search from API with MDB-Select and embedded search

Wim Olivier free asked 3 years ago

Expected behavior I want to start with a blank MDB-Select dropdown, and when a user types anything inside the search area, I want to be able to async use fetch to query an external API for the text, and build the dropdown options that match dynamically. The use must then be able to select an option, and it's value must be set in the component state.

Actual behavior Cannot build select options dynamically. Search only works to select existing options in the select dropdown.

**Resources (screenshots, code snippets etc.) I want to achieve what this can do: https://react-select.com/async

Wim Olivier free commented 3 years ago

Currently I have a static list of options. I want to create the list using external fetch API search calls.

   const selectOptions = [
    "MIDDELBURG",
    "MIDDELBURG EXT 10",
    "MIDDELBURG EXT 11",
    "MIDDELBURG EXT 12",
    "MIDDELBURG EXT 13",
    "MIDDELBURG EXT 14",
    "MIDDELBURG EXT 16",
    "MIDDELBURG EXT 17",
    "MIDDELBURG EXT 18",
    "MIDDELBURG EXT 19",
    "MIDDELBURG EXT 20",
    "MIDDELBURG EXT 21",
    "MIDDELBURG EXT 22",
    "MIDDELBURG EXT 23",
    "MIDDELBURG EXT 24",
    "MIDDELBURG EXT 3",
    "MIDDELBURG EXT 30",
    "MIDDELBURG EXT 31",
    "MIDDELBURG EXT 32",
  ];

    <MDBSelect
      required
      label="Township Name"
      getTextContent={(value) => {
      setPropertyName(value);
      console.log(value);
      }}
          >
            <MDBSelectInput selected="Township Name" />
            <MDBSelectOptions search>
              {selectOptions.map((item, index) => {
                return (
                  <MDBSelectOption value={item} key={index}>
                    {item}
                  </MDBSelectOption>
                );
              })}
            </MDBSelectOptions>
          </MDBSelect>

<p>Currently I have a static list of options. I want to create the list using external fetch API search calls.</p>

<pre class="prettyprint"><code>   const selectOptions = [
    "MIDDELBURG",
    "MIDDELBURG EXT 10",
    "MIDDELBURG EXT 11",
    "MIDDELBURG EXT 12",
    "MIDDELBURG EXT 13",
    "MIDDELBURG EXT 14",
    "MIDDELBURG EXT 16",
    "MIDDELBURG EXT 17",
    "MIDDELBURG EXT 18",
    "MIDDELBURG EXT 19",
    "MIDDELBURG EXT 20",
    "MIDDELBURG EXT 21",
    "MIDDELBURG EXT 22",
    "MIDDELBURG EXT 23",
    "MIDDELBURG EXT 24",
    "MIDDELBURG EXT 3",
    "MIDDELBURG EXT 30",
    "MIDDELBURG EXT 31",
    "MIDDELBURG EXT 32",
  ];

<MDBSelect
      required
      label="Township Name"
      getTextContent={(value) => {
      setPropertyName(value);
      console.log(value);
      }}
          >
            <MDBSelectInput selected="Township Name" />
            <MDBSelectOptions search>
              {selectOptions.map((item, index) => {
                return (
                  <MDBSelectOption value={item} key={index}>
                    {item}
                  </MDBSelectOption>
                );
              })}
            </MDBSelectOptions>
          </MDBSelect>
</code></pre>

Please insert min. 15 characters.

caio.davi free commented 3 years ago

I have the same issue. But I can't create a local list of options due to the size of my database. I was trying to use the search prop to get the user input and send an API request to populate the selector-options. But I don't think it would be possible using MDB-Selector.

Piotr Glejzer staff commented 3 years ago

Ok, I check it and you are right. There is a problem with async requests. I added the task to fix it.

Wim Olivier free commented 3 years ago

Hi Piotr,

Where in the docs does it say that it can do async requests? I did not find it.

Thanks, Wim

Piotr Glejzer staff commented 3 years ago

Yes, I know that you didn't find it because it doesn't exist :(

Add comment

Write

Create snippet

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: Free
Premium support: No
Technology: MDB React
MDB Version: 4.26.1
Device: Apple Macbook Pro
Browser: Chrome
OS: MacOS
Provided sample code: No
Provided link: Yes

Wim Olivier

37Support score
5Questions 1Answers 0Snippets