How to get list of available items shown as a dropdown

[ayushxx7]

I want to show a list of available items in a dropdown of sorts. So, if I have values such as "foo", "food", "foodie", and I type in fo the autocomplete hint will show foo in the search box (which is correct behavior), but I want to show all available options matching the substring "fo" in a nice little popup below. Is there a way we can get this feature incorporated?

[ejmudi]

I don't know if this is a feature we would want to add. Perhaps if we get more people requesting for it, we might consider adding it in.

[ayushxx7]

Just want to let you know, I ended up using a different plugin in Production. It's called Typeahead. It works well with react-bootstrap (your plugin does as well)

Import statements:

import { Typeahead } from "react-bootstrap-typeahead";
import "react-bootstrap-typeahead/css/Typeahead.css";

Within my search component I used it like so:

        <Typeahead
          id="basic-typeahead-single"
          labelKey="name"
          onChange={(e) => {
            this.setState({ search_state: e });
          }}
          options={options}
          placeholder="Enter Package Name..."
          style={{ width: "25em" }}
          onKeyDown={(e) => {
            // console.log("KEY::", e.key);
            if (e.key == "Enter") {
              this.props.searchImages(this.state.search_state);
            }
          }}
          onInputChange={(e) => {
            // console.log("Input Change:", e)
            this.setState({ search_state: e });
          }}
          maxResults={5}
        />

I also have a button component:

        <Button
          variant="outline-primary"
          onClick={() => {
            this.props.searchImages(this.state.search_state);
          }}
          className="mx-3"
        >
          Search
        </Button>

Both of these are part of the Navbar component

Just putting it here in case someone else faces a similar problem!