在Flutter中使用json数据进行自动完成建议和搜索

Question

class _AutoCompleteDemoState extends State < AutoCompleteDemo > {
  AutoCompleteTextField searchTextField;

  List < DoAwaitedList > doawaitedlist;
  String query = '';

  TextEditingController tc;
  bool loading = true;

  List < DoAwaitedList > autocomFromJson(String str) =>
  List < DoAwaitedList > .from(
    json.decode(str).map((x) => DoAwaitedList.fromJson(x)));
  String payloadToJson(List < DoAwaitedList > data) =>
  json.encode(List < dynamic > .from(data.map((x) => x.toJson())));


  Future < List < DoAwaitedList >> requestMethodtest() async {
    var url = "";
    var body = json.encode({ });
    Map < String, String > headers = {
      'Content-type': 'application/json',
      'Accept': 'application/json',
    };
    final response = await http.post(url, body: body, headers: headers);
    final responseJson = json.decode(response.body);

    setState(() {
      loading = true;
      doawaitedlist = autocomFromJson(response.body);
      loading = false;
    });
    if (response.statusCode == 200) {
      print('USerrrlist$responseJson');
    } else {
      throw Exception('Failed to load internet');
    }
    return doawaitedlist;
  }

  @override
  void initState() {
    requestMethodtest();
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomInset: false, // set it to false
      resizeToAvoidBottomPadding: false,
      appBar: new AppBar(
        iconTheme: IconThemeData(
          color: Colors.white, //change your color here
        ),
        title: new Text('AutoComplte'),
        backgroundColor: Color(getColorHexFromStr("#00324B")),
      ),
      body: Container(
        child: Column(
          children: < Widget > [


            new AutoCompleteTextField < > (
              decoration: new InputDecoration(
                hintText: "Search:",
                suffixIcon: new Icon(Icons.search)),
              itemSubmitted: (item) => setState(() => selected = item),
              key: key,
              suggestions: suggestions,
              itemBuilder: (context, suggestion) => new Padding(
                child: new ListTile(
                  title: new Text(suggestion.name),
                ),
                padding: EdgeInsets.all(8.0)),
              itemSorter: (a, b) => a.stars == b.stars ? 0 : a.stars > b.stars ? -1 : 1,
              itemFilter: (suggestion, input) =>
              suggestion.name.toLowerCase().startsWith(input.toLowerCase()),
            ),

            Expanded(
              child: Center(
                child: loading && doawaitedlist == null ?
                ListTile(
                  title: Text('Loading...'),
                  leading: Center(child: CircularProgressIndicator()),
                ) :
                doawaitedlist == null ?
                ListTile(
                  title: Text('Loading...'),
                  leading: Center(child: CircularProgressIndicator()),
                ) :
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: doawaitedlist == null ? 0 : doawaitedlist[0].rows.length,
                  itemBuilder: (context, index) {


                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

}

class DoAwaitedList {
  int status;
  String msg;
  List < Rows > rows;
  String sql;
  dynamic reserved;

  DoAwaitedList({
    this.status,
    this.msg,
    this.rows,
    this.sql,
    this.reserved,
  });

  factory DoAwaitedList.fromJson(Map < String, dynamic > json) => DoAwaitedList(
    status: json["status"],
    msg: json["msg"],
    rows: List < Rows > .from(json["rows"].map((x) => Rows.fromJson(x))),
    sql: json["sql"],
    reserved: json["reserved"],
  );

  Map < String, dynamic > toJson() => {
    "status": status,
    "msg": msg,
    "rows": List < dynamic > .from(rows.map((x) => x.toJson())),
    "sql": sql,
    "reserved": reserved,
  };
}
class Rows {
  String CustName;
  String CustCode;
  Rows({
    this.CustName,
    this.CustCode,
  });

  factory Rows.fromJson(Map < String, dynamic > json) => Rows(
    CustName: json["CustName"],
    CustCode: json["CustCode"],
  );
  Map < String, dynamic > toJson() => {
    "CustName": CustName,
    "CustCode": CustCode,
  };
}

我想在用户在文本字段中键入内容时，通过列表中的api调用实现自动完成的文本字段显示数据（即json数据）作为建议。显示的建议应基于与要显示的文本关联的ID。我不知如何无法在UI中显示数据，以及如何构建将在列表中显示建议的小部件层次结构。不知道我在这里想念什么。寻找指导。我希望达到的最终结果是。感谢您的帮助。[！[

Json snippet:

  [{
    "status": 200,
    "msg": "Ok",
    "refcode": -1,
    "trows": 771,
    "rows": [{
        "CustName": "ELECTRICALS SYSTEM",
        "CustCode": "1F",

      },
      {
        "CustName": "ELECTRICALS",
        "CustCode": "2R",

      },
      {
        "CustName": "GABL CFH",
        "CustCode": "2T",

      }

    ],
    "sql": "User",
    "reserved": null
  }]

Answer 1

目前我没有sdk，因此我在以下替代方法中使用了dartpad。您也可以使用JSON数据对Autocomplete .....进行相同操作]

List<Map> jsonData = [{
        "status": 200,
        "msg": "Ok",
        "refcode": -1,
        "trows": 771,
        "rows": [{
            "CustName": "ELECTRICALS SYSTEM",
            "CustCode": "1F",

          },
          {
            "CustName": "ELECTRICALS",
            "CustCode": "2R",

          },
          {
            "CustName": "GABL CFH",
            "CustCode": "2T",

          }

        ],
        "sql": "User",
        "reserved": null
      }];

      List<Map> rows=[];
      String query = '';
      TextEditingController tc;

      @override
      void initState() {
        super.initState();
        tc = TextEditingController();
        rows = jsonData[0]['rows'];
      }

      @override
      Widget build(BuildContext context) {
        return new Scaffold(
            body: Container(
                color: Colors.white,
                padding: EdgeInsets.all(10),
                child: Stack(children: [
                  Positioned(
                      top: 70,
                      child:
                          Column(children: [Text('Other Widgets goes here...!')])),
                  Column(children: [
                    TextField(
                        controller: tc,
                        decoration: InputDecoration(hintText: 'Search...'),
                        onChanged: (v) {
                          setState(() {
                            query = v;
                          });
                        }),
                    Container(
                        color: Colors.white,
                        child: ListView.builder(
                            shrinkWrap: true,
                            itemCount: rows.length,
                            itemBuilder: (con, ind) {
                              return query.trim().isEmpty
                                  ? null
                                  : rows[ind]['CustName'].toString()
                                          .toLowerCase()
                                          .contains(query.toLowerCase())
                                      ? ListTile(
                                          title: Text(rows[ind]['CustName']),
                                          onTap: () {
                                            setState(() {
                                              tc.text = rows[ind]['CustName'];
                                              query = rows[ind]['CustName'];
                                            });
                                          })
                                      : null;
                            }))
                  ]),
                ])));
      }