Question

我构建了一个可以这样调用的服务：

Future<List<User>> fetchUser(http.Client client) async {
  final response = await client
      .get(Uri.parse('https://mywebsite.org/users/search?q=HolyFreak'));
}

class User {
  final String uid;
  final String email;
  final String name;
  final String user_name;

  User({this.uid, this.email, this.name, this.user_name});

  factory User.fromJson(Map<String, dynamic> json) {
    return Asset(
      uid: json['uid'] as String,
      email: json['email'] as String,
      name: json['name'] as String,
      user_name: json['user_name'] as String,
    );
  }
}

服务呼叫返回我：

[{"uid":"Udfsgd324dsgf345d5","email":"me@you.com","name":"John Doe","user_name":"HolyFreak"}]

现在我想构建一个新表单，用户可以在其中搜索用户并从搜索结果中进行选择。我有一个 TextFormField：

              TextFormField(
                controller: userController,
                decoration: const InputDecoration(
                  hintText: 'Search for the username',
                ),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter name';
                  }
                  return null;
                },
                onSaved: (value) => _user = value,
              ),

我还添加了一个监听器来监听用户的输入变化：

  void initState() {
    userController = TextEditingController();
    super.initState();

    userController.addListener(_listenUserController);
  }

  _listenUserController() {
    print("User: ${userController.text}");
  }

此后，我可以使用“Searchresult(user[index].name)”访问小部件中的搜索数据。

我想要的是：我希望用户点击用户名字段。他/她开始输入名称的第一个字母，如果用户没有输入一秒钟，网络服务将被调用并在当前字段的下拉列表中显示搜索结果，以便用户选择。

希望你能理解我在找什么。如果您能向我展示一个示例，让我了解如何执行此操作，那就太好了。

提前致谢帕特里克

Answer 1

您可以尝试使用 find_dropdown 之类的方法，它完全符合您的要求。

您可以提供一个简单的列表，如果用户搜索或更改文本，您可以调用请求并获取要显示的新数据，然后用户可以从该列表中进行选择。

想从网络服务中搜索结果并向用户显示结果

1 个答案: