TypeAheadField：如何仅在2个字符后显示下拉建议框

Question

这就是我实现

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

中输入至少 2 个字符后才显示下拉建议框。有人可以帮我吗？

Answer 1

具体操作方法如下：

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 ....                
   },
)

在上面的代码中，我们检查

pattern

中的

suggestionsCallback

（用户输入）的长度。如果长度大于或等于 2，我们像以前一样调用

_allLeaveViewModel.getSuggestions(pattern)

来获取建议。如果长度小于 2，我们返回一个空列表，有效隐藏建议。

Answer 2

ThypeAheadField 有一个属性 minCharsForSuggestions，您将其设置为 2，它将按照您的意愿工作。

 TypeAheadField(
  minCharsForSuggestions: 2,
  //..
 )