提问人：Saurabh Jain 提问时间：9/13/2023 更新时间：9/13/2023 访问量：65
TypeAheadField：如何在 2 个字符后仅显示下拉建议框
TypeAheadField: How to show the dropdown suggestion box only after 2 characters
问：
这就是我实现的方式，它工作正常，并在用户单击该字段后立即显示下拉建议框。TypeAheadField
TypeAheadField(
noItemsFoundBuilder: (context) => const SizedBox(
height: 50,
child: Center(child: Text("No user found!")),
),
suggestionsBoxDecoration: SuggestionsBoxDecoration(
color: Colors.deepPurple.shade50,
elevation: 4.0,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15))),
textFieldConfiguration: TextFieldConfiguration(
controller: _allLeaveViewModel.searchController,
onChanged: (value) {
setState(() {
_allLeaveViewModel.isSearchTextNotEmpty.value =
value.isNotEmpty;
});
_allLeaveViewModel.updateList(value);
if (value.isEmpty) {
Utils.removeFocusFromSearch(context);
}
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(
16.0, 12.0, 16.0, 12.0),
hintText: 'Filter by applicant',
hintStyle: TextStyle(
color: Colors.black.withOpacity(0.5),
fontSize: 16),
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(70),
borderSide: BorderSide.none,
),
suffixIcon: Obx(() {
return Visibility(
visible: _allLeaveViewModel
.isSearchTextNotEmpty.value,
child: IconButton(
icon: Icon(
Icons.cancel_outlined,
color: Colors.grey.shade700,
size: 25,
),
onPressed: () {
_allLeaveViewModel.clearSearchAndList();
},
),
);
}),
),
),
suggestionsCallback: (String pattern) {
return _allLeaveViewModel.getSuggestions(pattern);
},
itemBuilder:
(BuildContext context, String suggestion) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Row(
children: [
const SizedBox(
width: 10,
),
Flexible(
child: Text(
suggestion,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontSize: 16),
))
],
),
);
},
onSuggestionSelected: (suggestion) {
setState(() {
_allLeaveViewModel.isSearchTextNotEmpty.value =
suggestion.isNotEmpty;
});
_allLeaveViewModel.searchController.text =
suggestion;
_allLeaveViewModel.updateList(suggestion);
},
),
但是现在我想要的是仅在用户在 .谁能帮我？TypeAheadField
答：
0赞
DEFL
9/13/2023
#1
第一个选项：
更新建议Callback 通常会为您提供更多自定义选项，因为您可以访问String pattern
TypeAheadField(
// ... other properties ...
suggestionsCallback: (String pattern) {
// Check if the user has typed at least 2 characters
if (pattern.length >= 2) {
//Returns a Map<String, String>
return _allLeaveViewModel.getSuggestions(pattern); //If returns
} else {
// If not, return an empty Map to hide the suggestions
return {};
}
},
// ... other properties ...
itemBuilder: (BuildContext context, Map<String,String> suggestion) {
return ....
},
)
在上面的代码中，我们检查了 中 （用户输入） 的长度。如果长度大于或等于 2，我们像以前一样调用以获取建议。如果长度小于 2，我们将返回一个空列表，从而有效地隐藏建议。patternsuggestionsCallback_allLeaveViewModel.getSuggestions(pattern)
第二种选择：
用minCharsForSuggestions: 2,
评论
0赞
Saurabh Jain
9/13/2023
嗨，@DEFL，当我在 中应用上述条件时，我已经尝试了很多次，我收到此错误：“参数类型'Padding Function（BuildContext， String）'无法分配给参数类型'Widget Function（BuildContext， dynamic）'。suggestionCallback
0赞
Saurabh Jain
9/13/2023
我在 下方收到此错误，您可以在上面的问题中看到代码。itemBuildersuggestionCallback
0赞
DEFL
9/13/2023
我不知道你得到什么建议...看起来像，但如果它返回一个地图，例如，需要修改项目生成器以匹配该类型itemBuilder：（context，Map<String，String>建议）{}
1赞
Vexolio
9/13/2023
#2
ThypeAheadField 有一个属性 minCharsForSuggesties，您可以将其设置为 2，它将根据需要工作。
TypeAheadField(
minCharsForSuggestions: 2,
//..
)
评论
1赞
Saurabh Jain
9/13/2023
嘿，伙计，你太棒了，谢谢！成功了。
评论