如何挂钩的本地JSON数据，实现与自动完成列表文本搜索？(How to hook up data f

我想实现输入搜索功能，其中输入搜索文本将显示提示文字和用户可以从列表中选择相应的文本和点击搜索按钮，进入相应的界面。建议的文本是local json和我说这下下assets/文件夹和pubspec.yaml 。搜索文本字段是：

上面的代码是：

new TextField(
            style: new TextStyle(
            color: Colors.white,
          fontSize: 16.0),
          cursorColor: Colors.green,
          decoration: new InputDecoration(
            suffixIcon: Container(
              width: 85.0,
              height: 60.0,
              color: Colors.green,
              child: new IconButton(
                icon: new Image.asset('assets/search_icon_ivory.png',color: Colors.white, height: 18.0,),
                onPressed: () {
                },
              ),
            ),
          fillColor: Colors.black,
            contentPadding: new EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 20.0),
            filled: true,
            hintText: 'What Do You Need Help With?',
            hintStyle: new TextStyle(
              color: Colors.white
            )
        )
        )

本地JSON数据样本是：

我想实现上述使用autocomplete_textfield我已经安装有进口包装并参照这个例子。

我想知道如何开始这个并整合本地JSON解析，钩使用数据autocomplete_textfield包来实现我的目标。我没有做过解析在扑JSON又那么寻找指导如何做到这一点。最终的结果，我寻找的是这样的：

*****************编辑**************

我现在能够从分析数据local json和在显示它listView使用的演示应用程序。对于它，我创建了一个新的模型类`services.dart”如下：

class Categories {
  String serviceCategory;
  String servCategoryDesc;
  int id;
  String autocompleteterm;
  String category;
  String desc;

  Categories({
    this.serviceCategory,
    this.servCategoryDesc,
    this.id,
    this.autocompleteterm,
    this.category,
    this.desc
  });

  factory Categories.fromJson(Map<String, dynamic> parsedJson) {
    return Categories(
        serviceCategory:parsedJson['serviceCategory'] as String,
        servCategoryDesc: parsedJson['serviceCategoryDesc'] as String,
        id: parsedJson['serviceCategoryId'],
        autocompleteterm: parsedJson['autocompleteTerm'] as String,
        category: parsedJson['category'] as String,
        desc: parsedJson['description'] as String
    );
  }
}

用于builder函数来检索和显示值listview如下：

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Load local JSON file"),
        ),
        body: new Container(
            child: new Center(
              // Use future builder and DefaultAssetBundle to load the local JSON file
                child: new FutureBuilder(
                  future: DefaultAssetBundle
                      .of(context)
                      .loadString('assets/services.json'),
                  builder: (context, snapshot) {
                    // Decode the JSON
                    Map data = json.decode(snapshot.data
                        .toString());
                    print(data);
                    final List<Categories> items = (data['data'] as List).map((i) => new Categories.fromJson(i)).toList();
                    for (final item in items) {
                      print(item.category);

                      return new ListView.builder(
                        itemBuilder: (BuildContext context, int index) {
                          return new Card(
                            child: new Column(
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: <Widget>[
                                new Text('Service Category: ' + items[index].category),
                                new Text('Category' + items[index].categoryDesc),
                                new Text('Auto complete term' + items[index].autocompleteterm),
                                new Text('Desc' + items[index].desc)
                              ],
                            ),
                          );
                        },
                      );
                    }
                  }

    )
    )
    )
    );
  }
}

在我的目标应用程序，添加需要使用代码autocomplete_textfield包装说明的建议，目前的静态列表：

@override
  Widget build(BuildContext context) {

    textField = new AutoCompleteTextField<String>
      (style: new TextStyle(
        color: Colors.white,
        fontSize: 16.0),
        decoration: new InputDecoration(
            suffixIcon: Container(
              width: 85.0,
              height: 60.0,
              color: Colors.green,
              child: new IconButton(
                icon: new Image.asset('assets/search_icon_ivory.png',color: Colors.white,
                  height: 18.0,),
                onPressed: (){},
              ),
            ),
            fillColor: Colors.black,
            contentPadding: new EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 20.0),
            filled: true,
            hintText: 'What Do You Need Help With ?',
            hintStyle: new TextStyle(
                color: Colors.white
            )
        ),
        submitOnSuggestionTap: true,
        clearOnSubmit: true,
        textChanged: (item){
          currentText = item;
        },
        textSubmitted: (item) {
          setState(() {
            currentText = item;
          });
        },
        key: key,
        suggestions: suggestions,
        itemBuilder: (context, item) {
          return new Padding(
              padding: EdgeInsets.all(8.0), child: new Text(item));
        },
        itemSorter: (a, b) {
          return a.compareTo(b);
        },
        itemFilter: (item, query) {
          return item.toLowerCase().startsWith(query.toLowerCase());
        });

    Column body = new Column(children: [
      new GestureDetector(
        child: new ListTile(
          title: textField,
              onTap: () {
                setState(() {
                  if (currentText != "") {
                    added.add(currentText);
                    textField.clear();
                    currentText = "";
                  }
                });
              }
              )
      )
    ]
    );

    body.children.addAll(added.map((item) {
      return new ListTile(
          title: new Text(item)
      );
    }));

    return Scaffold(
        resizeToAvoidBottomPadding: false,
        backgroundColor: Color(0xFF13212C),
        appBar: AppBar(
          title: Text(''),
        ),
        drawer: appDrawer(),
        body: new Center(
        child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Column(
            children: <Widget>[
              textField

上面的代码显示如下界面：