使用 json 数据自动完成建议和搜索

Question

我想在 list 中显示来自本地 json 的数据作为用户在文本字段中键入时的建议。显示的建议应基于与要显示的文本关联的 id。不知何故，我无法实现在 UI 中显示数据以及如何构建将在 list 中显示建议的小部件层次结构。不知道我在这里错过了什么。寻求指导。我希望实现的最终结果是：

Json 片段：

{
    "data": [{
        "serviceCategory": "ELECTRICAL",
        "serviceCategoryDesc": "Electrical",
        "serviceCategoryId": 3,
        "autocompleteTerm": "Accent Lighting Installation",
        "category": "IMPROVEMENT",

例如：如果用户键入 electrical，则 autocompleteterm 值应显示在 list 中。

为此，我创建了模型 class 并获取了它在 console 中正确显示的数据。

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
    );
  }
}

代码：

    // Get json result and convert it to model. Then add
      Future<String> getUserDetails() async {

        String jsonData = await DefaultAssetBundle.of(context).loadString('assets/services.json');
        Map data = json.decode(jsonData);
        print(data);

        setState(() {
          final List<Categories> items = (data['data'] as List).map((i) => new Categories.fromJson(i)).toList();
          for (final item in items) {
            print(item.autocompleteterm);
          }
        });
      }

GlobalKey<AutoCompleteTextFieldState<Categories>> key = new GlobalKey();

   get categories => List<Categories>();

  AutoCompleteTextField textField;

  String currentText = "";

  List<Categories> added = [];

@override
  void initState() {
    textField = AutoCompleteTextField<Categories>
      (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) => 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: <Widget>[
        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: <Widget>[
          new Column(
            children: <Widget>[
              textField,
        ]
    ),

Answer 1

autocomplete_field 包在提出这个问题后已经更新，现在允许使用字符串以外的对象来工作：

首页：

import 'package:flutter/material.dart';
import 'package:hello_world/category.dart';
import 'package:autocomplete_textfield/autocomplete_textfield.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Category> added = [];
  String currentText = "";
  GlobalKey<AutoCompleteTextFieldState<Category>> key = new GlobalKey();
  AutoCompleteTextField textField;

  @override void initState() {
      textField = new AutoCompleteTextField<Category>(
        decoration: new InputDecoration(
          hintText: "Search Item",
        ),
        key: key,
        submitOnSuggestionTap: true,
        clearOnSubmit: true,
        suggestions: CategoryViewModel.categories,
        textInputAction: TextInputAction.go,
        textChanged: (item) {
          currentText = item;
        },
        itemSubmitted: (item) {
          setState(() {
            currentText = item.autocompleteterm;
            added.add(item);
            currentText = "";
          });
        },
        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();
    }

  @override
  Widget build(BuildContext context) {
    Column body = new Column(children: [
      new ListTile(
          title: textField,
          trailing: new IconButton(
              icon: new Icon(Icons.add),
              onPressed: () {
                setState(() {
                  if (currentText != "") {
                    added.add(CategoryViewModel.categories.firstWhere((i) => i.autocompleteterm.toLowerCase().contains(currentText)));
                    textField.clear();
                    currentText = "";
                  }
                });
              }))
    ]);

    body.children.addAll(added.map((item) {
      return ListTile(title: Text(item.autocompleteterm), subtitle: Text(item.serviceCategory));
    }));

    return body;
  }
}

类别类:

import 'dart:convert';

import 'package:flutter/services.dart' show rootBundle;

class Category {
  String serviceCategory;
  String servCategoryDesc;
  int id;
  String autocompleteterm;

  Category(
      {this.serviceCategory,
      this.servCategoryDesc,
      this.id,
      this.autocompleteterm});

  factory Category.fromJson(Map<String, dynamic> parsedJson) {
    return new Category(
        serviceCategory: parsedJson['serviceCategory'],
        servCategoryDesc: parsedJson['serviceCategoryDesc'],
        id: parsedJson['serviceCategoryId'],
        autocompleteterm: parsedJson['autocompleteTerm']);
  }
}

class CategoryViewModel {
  static List<Category> categories;

  static Future loadCategories() async {
    try {
      categories = new List<Category>();
      String jsonString = await rootBundle.loadString('assets/categories.json');
      Map parsedJson = json.decode(jsonString);
      var categoryJson = parsedJson['data'] as List;
      for (int i = 0; i < categoryJson.length; i++) {
        categories.add(new Category.fromJson(categoryJson[i]));
      }
    } catch (e) {
      print(e);
    }
  }
}

主要加载数据：

void main() async {
  await CategoryViewModel.loadCategories();
  runApp(App());
}

请注意，有几种方法可以从 JSON 加载数据，但我发现对于一个简单的演示来说，这种方法最容易实现。

使用 json 数据自动完成建议和搜索

Autocomplete suggestion and search using json data

json

autocomplete

flutter

flutter-layout