Reputation: 1
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.
Upvotes: 0
Views: 28
Reputation: 550
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
Upvotes: 0