salim-lachdhaf / searchable_dropdown

Simple and robust Dropdown with item search feature, making it possible to use an offline item list or filtering URL for easy customization.
MIT License
326 stars 316 forks source link

Maybe a good idea to implement "search" for a package that's called SEARCHABLE_dropdown #626

Closed rvwoens closed 4 months ago

rvwoens commented 5 months ago

There is no documentation how to get the TextField searchable. This seems to be the whole purpose of this package.

All examples only allow dropping down the list and selecting one item by clicking. Filtering the result list by typing a few letters (the "search" feature) is never shown in the docs.

Maybe it is possible to do this, however arguments like "isFilteredOnline" no longer seem to be possible in 5.0.6

Also the package gives errors when clicking too fast: "Duplicate GlobalKey detected in widget tree.", so better avoid this package.

damianololo commented 4 months ago

search works fine. try this code:

  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> list = ['1112', '11122', '11123','11133','11143'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: DropdownSearch<String>(
          onChanged: (value) {
            print(value);
          },
          items: list,
          compareFn: (i, s) => i == s,
          dropdownButtonProps: const DropdownButtonProps(
            padding: EdgeInsets.zero,
          ),
          dropdownDecoratorProps: const DropDownDecoratorProps(
            textAlign: TextAlign.left,
            textAlignVertical: TextAlignVertical.center,
            dropdownSearchDecoration: InputDecoration(
              hintText: 'Comune',
              contentPadding: EdgeInsets.zero,
              border: InputBorder.none,
            ),
          ),
          popupProps: PopupPropsMultiSelection.modalBottomSheet(
            showSelectedItems: true,
            showSearchBox: true,
            itemBuilder: (
              BuildContext context,
              String? value,
              bool isSelected,
            ) =>
                Text(value!),
          ),
        ),
      ),
    );
  }
}
salim-lachdhaf commented 4 months ago

@rvwoens you have just useshowSearchBox: true,.

please don't hesitate to take a look to examples page for more examples.