Flutter dart get continuous data from on changed function using future provider

Question

I want to add search functionality from Api. It is a backend search, so I get data continuous when clicked on on-changed function. I use future provider to get data. Please tell how can I achieve that. Here Is my design what I want to do. Ui Image Demo

Also Here Is my code demo

`

class SearchPage extends StatelessWidget {
  const SearchPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => SearchProvider()),
      ],
      child: Consumer<SearchProvider>(
        builder: (context, value, child) => Scaffold(
          appBar: BuildSearchAppBar(),
          body: Body()
        ),
      ),
    );
  }
}

class BuildSearchAppBar extends StatelessWidget with PreferredSizeWidget {
  BuildSearchAppBar({super.key});

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context) {
    SearchProvider provider = Provider.of<SearchProvider>(context);

    return AppBar(
      title: TextField(
        controller: provider.textEditingController,
        decoration: InputDecoration(
          alignLabelWithHint: true,
          floatingLabelBehavior: FloatingLabelBehavior.never,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(6.r),
          ),
          constraints: BoxConstraints.tight(Size(1.sw, 40.h)),
          labelText: "Search",
          prefixIcon: Icon(
            Icons.search,
            size: 20.r,
          ),
          labelStyle: TextStyle(fontSize: 15.sp, fontStyle: FontStyle.italic),
        ),
        onChanged: (value) {
          provider.showProductSuggetion();
        },
      ),
      actions: [
        IconButton(
          onPressed: () {
            provider.textEditingController.clear();
          },
          icon: const Icon(Icons.clear),
        ),
      ],
    );
  }
}

class SearchProvider with ChangeNotifier {
  bool isClicked = false;
  final TextEditingController textEditingController = TextEditingController();

  void showProductSuggetion()  {
     isClicked = true;
    FutureProvider(
        create: (_) => searchSuggestionService(textEditingController.text),
        initialData: SearchSuggetionModel());

    notifyListeners();
  }

  Future<SearchSuggetionModel> searchSuggestionService(String keyword) async {
    Map<String, Map<String, Object>> singleProductVariable = {
      "productPrams": {"search": keyword, "visibility": true, "approved": true}
    };
    QueryResult queryResult = await qlclient.query(
      QueryOptions(
          document: gql(QueryDocument.searchSuggestion),
          variables: singleProductVariable),
    );

    var data = queryResult.data as Map<String, dynamic>;
    print(data);
    var body = SearchSuggetionModel.fromJson(data);
    notifyListeners();
    return body;
  }
}

I want to implement backend search with continues data fetching using provider.