Flutter Web Searchfield is not filtering results in suggestions after text input

Question

I'm trying to search through List<Map<String, dynamic>> partyList where each map stores information about party. I implemented searchfield as follows.

Padding(
    padding: const EdgeInsets.only(bottom: 10),
    child: SearchField<Map<String, dynamic>>(
        onSearchTextChanged: (query) {
            final filter = partyListDoc
                .where((element) =>
                    element['partyName'].toLowerCase()
                       .contains(query.toLowerCase()))
                                      .toList();
            return filter.map((party) =>
                SearchFieldListItem<Map<String, dynamic>>(
                    party['partyName'],
                    item: party,
                    child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                                Text(party['partyName']),
                                Text(party['currentBalance'].toString()),
                            ],
                        ),
                    ))
                    .toList();
            },
        suggestions: partyListDoc.map((party) {
            return SearchFieldListItem<Map<String, dynamic>>(
                party['partyName'],
                item: party,
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                        Text(party['partyName']),
                        Text(party['currentBalance'].toString()),
                    ],
                ),
            );
        }).toList(),
        suggestionState: Suggestion.expand,
        textInputAction: TextInputAction.next,
        hint: 'Search by Party Name',
        validator: (x) {
            if (x == null || x.isEmpty) {
                return 'Please enter a party name';
            }
            return null;
        },
        maxSuggestionsInViewPort: 6,
        itemHeight: 50,
        onSuggestionTap: (SearchFieldListItem<Map<String, dynamic>> suggestion) {
           setState(() {
               selectedPartyId = suggestion.item!['partyId'];
           });
           focus.unfocus();
       },
       focusNode: focus,
   )
),

After typing text in the search field, it filters the results once for a short while and then displays the whole list again. How to just display the filtered results in the suggestions.

I have tried removing and modifying onSearchTextChange, but the results are same.

SilkeNL · Accepted Answer · 2024-07-30 08:31:26Z

0

I think you only need the suggestions parameter, not the onSearchFieldChanged yet. In the example from the docs they seem to be showing your use case:

SearchField<Country>(
  suggestions: countries
    .map(
    (e) => SearchFieldListItem<Country>(
      e.name,
      item: e,
      // Use child to show Custom Widgets in the suggestions
      // defaults to Text widget
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: [
            CircleAvatar(
              backgroundImage: NetworkImage(e.flag),
            ),
            SizedBox(
              width: 10,
            ),
            Text(e.name),
          ],
        ),
      ),
  ),
  ).toList(),
),

Source: https://pub.dev/packages/searchfield

answered Jul 30, 2024 at 8:31

SilkeNL

5622 gold badges9 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flutter Web Searchfield is not filtering results in suggestions after text input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related