dropdown_search flutter search functionality not working

Question

DropdownSearch<ProductModel>(
  asyncItems: (String filter) => getData(filter),
  itemAsString: (ProductModel u) => u.name,
  onChanged: (ProductModel? data) {
    instcatname = data?.name;
    instcatid = data?.id;
    calibprov.SaveInstcatid(data!.id);
    calibprov.Saveinstcatname(data.name);
    print("instcatnameis${calibprov.instcatname}");
    print("instcatidis${calibprov.instcatid}");
  },
  dropdownDecoratorProps: DropDownDecoratorProps(
    dropdownSearchDecoration: InputDecoration(
      labelText: calibprov.instcatname ?? "Instrument Category",
      hintText: "Search",
    ),
  ),
),
Future<List<ProductModel>> getData(String filter) async {
  await Provider.of<CaliberationProvider>(context, listen: false).FetchInstCategory();
  List<ProductModel> instcategory = Provider.of<CaliberationProvider>(context, listen: false).instcategory;
  List<ProductModel> filteredInstcategory = instcategory.where((product) {
    return product.name.toLowerCase().contains(filter.toLowerCase());
  }).toList();
  return filteredInstcategory;
}

I'm trying to implement a search function, but it's only displaying data and not the search results.when i try to to click dropdown it just showing data with dropdown not with searchable.

Answer 1

add showSearchBox: true instead of the function and asyncItems: then the search bar will appear inside the menu and you will be able to search. don't forget to add items: parameter and give your list to it

 DropdownSearch<ProductModel>(
 items: // add your list //
 popupProps: const PopupProps.menu(
                        searchFieldProps: TextFieldProps(
                            style: TextStyle(color: Colors.black)
                        ),
                        showSearchBox: true,
                        menuProps: MenuProps(
                          backgroundColor: Colors.white,
                        ),
                        fit: FlexFit.loose
  ),

customize the decoration as you like