Home > database >  Autocomplete() class not displaying all items in list
Autocomplete() class not displaying all items in list

Time:01-19

I have a List<String>[] that has a single list of items as below:

List<String> food = <String> [
  "Apple",
  "Banana",
  "Orange",
  …
];

It has 900 items (Not sure if that's relevant).

I am using the Autocomplete class.

Autocomplete<String>(
  optionsBuilder: (TextEditingValue textEditingValue) {
    if (textEditingValue.text == '') {
      return const Iterable<String>.empty();
    }
    return food.where((String option) {
      return option.contains(textEditingValue.text.toLowerCase());
    });
  },
  onSelected: (String selection) {
    debugPrint('You just selected $selection');
  },
),

However, it only shows some items in the list and not all the items when typing. Example, if I type B, all List items show and are scrollable but if I type ban, banana does not show up.

Any idea why it's doing that?

CodePudding user response:

It's not matching because your options are first letter uppercase, and you parse your typed text to lowercase. So try to parse the option to lowercase and then check does it match, like this:

return food.where((String option) {
  return option.toLowerCase().contains(textEditingValue.text.toLowerCase());
});
  • Related