title: Autocomplete suggestion and search using json data
body: <p>I want to display data from local json in <code>list</code> as suggestions when user types in a textfield. The suggestions displayed should be based on  <code>id</code> that is associated with text to be displayed. 
  Somehow I am not able to achieve to display the data in UI and how to build the hierarchy of widgets that will display suggestions in <code>list</code>. Not sure what am I missing here. Looking for guidance. End result I am looking to achieve is:</p>
  
  <p><a href="https://i.stack.imgur.com/tMEqE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tMEqE.png" alt="enter image description here"></a></p>
  
  <p>Json snippet:</p>
  
  <pre><code>{
      "data": [{
          "serviceCategory": "ELECTRICAL",
          "serviceCategoryDesc": "Electrical",
          "serviceCategoryId": 3,
          "autocompleteTerm": "Accent Lighting Installation",
          "category": "IMPROVEMENT",
  </code></pre>
  
  <p>Ex : If user types <code>electrical</code>, then <code>autocompleteterm</code> value should be displayed in the <code>list</code>. </p>
  
  <p>For this, I created model class and fetching it's data which is displayed in <code>console</code> properly.</p>
  
  <pre><code>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&lt;String, dynamic&gt; 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
      );
    }
  }
  </code></pre>
  
  <p>Code :</p>
  
  <pre><code>    // Get json result and convert it to model. Then add
        Future&lt;String&gt; getUserDetails() async {
  
          String jsonData = await DefaultAssetBundle.of(context).loadString('assets/services.json');
          Map data = json.decode(jsonData);
          print(data);
  
          setState(() {
            final List&lt;Categories&gt; items = (data['data'] as List).map((i) =&gt; new Categories.fromJson(i)).toList();
            for (final item in items) {
              print(item.autocompleteterm);
            }
          });
        }
  
  GlobalKey&lt;AutoCompleteTextFieldState&lt;Categories&gt;&gt; key = new GlobalKey();
  
     get categories =&gt; List&lt;Categories&gt;();
  
    AutoCompleteTextField textField;
  
    String currentText = "";
  
    List&lt;Categories&gt; added = [];
  
  @override
    void initState() {
      textField = AutoCompleteTextField&lt;Categories&gt;
        (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: EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 20.0),
          filled: true,
          hintText: 'Search',
          hintStyle: TextStyle(
            color: Colors.white
          )
        ),
          itemSubmitted: null,
          submitOnSuggestionTap: true,
          clearOnSubmit: true,
          textChanged: (item) {
          currentText = item;
          },
          textSubmitted: (item) {
          setState(() {
            currentText = item;
            added.add(widget.categories.firstWhere((i) =&gt; i.autocompleteterm.toLowerCase().contains(currentText)));
          });
          },
          key: key,
          suggestions: widget.categories,
          itemBuilder: (context, item) {
          return new Padding(
            padding: EdgeInsets.all(8.0), child: new Text(item.autocompleteterm),
          );
          },
          itemSorter: (a,b) {
          return a.autocompleteterm.compareTo(b.autocompleteterm);
          },
          itemFilter: (item, query){
          return item.autocompleteterm.toLowerCase().startsWith(query.toLowerCase());
          });
      super.initState();
      _getUser();
      getUserDetails();
    }
  
    @override
    Widget build(BuildContext context) {
      Column body = new Column(
        children: &lt;Widget&gt;[
          ListTile(
            title: textField,
          )
        ],
      );
      body.children.addAll(added.map((item) {
        return ListTile(title: Text(item.autocompleteterm),
        );
      }
      )
      );
  
      return Scaffold(
          resizeToAvoidBottomPadding: false,
          backgroundColor: Color(0xFF13212C),
          appBar: AppBar(
            title: Text('Demo'),
          ),
          drawer: appDrawer(),
          body: new Center(
          child: new Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: &lt;Widget&gt;[
            new Column(
              children: &lt;Widget&gt;[
                textField,
          ]
      ),
  </code></pre>