incubator-autocomplete-flow's Introduction

Deprecated

This repository has been deprecated. Please find the latest code here: https://github.com/vaadin-component-factory/autocomplete

Incubator Autocomplete for Flow

Live Demo ↗

<incubator-autocomplete> is a text input with a panel of suggested options.

<incubator-autocomplete> is built with Vaadin Incubator. To use it, you need to have a access to Vaadin Incubator, which is included in Vaadin Prime.

What does the component do?

Autocomplete is a Web Component providing an easy way to provide an autocomplete functionality.

How is it used?

A simple use of the Autocomplete component would be the following.

H3 inputH3 = new H3("Current input: ");
H3 selectionH3 = new H3("Selection: ");
Autocomplete autocomplete = new Autocomplete(5);

autocomplete.addChangeListener(event -> {
    String text = event.getValue();
    autocomplete.setOptions(findOptions(text));
    inputH3.setText("Current input: " + text);
});

autocomplete.addAutocompleteValueAppliedListener(event -> {
    selectionH3.setText("Selection: " + event.getValue());
});

autocomplete.addValueClearListener(event -> {
    selectionH3.setText("Selection: " + "");
});

autocomplete.setLabel("Find what you want:");
autocomplete.setPlaceholder("search ...");

How to run the demo?

The Demo can be run going to the project incubator-autocomplete-flow-vaadincom-demo and executing the maven goal:

mvn jetty:run

License & Author

This Add-on is distributed under Commercial Vaadin Add-on License version 3 (CVALv3). For license terms, see LICENSE.txt.

Incubator Autocomplete is written by Vaadin Ltd.

Setting up for development:

Clone the project in GitHub (or fork it if you plan on contributing)

git clone [email protected]/vaadin/incubator-autocomplete-flow.git

To build and install the project into the local repository run

mvn install

incubator-autocomplete-flow's People

Contributors

Watchers

incubator-autocomplete-flow's Issues

Feedback

Gilberto Feedback

My 2c, and questions:

Use limit -1 to indicate the lack of limit, instead of zero;
It would be more convenient to just provide a lambda to retrieve the options, instead of a change listener;
If you want to lose your sanity, consider providing support for DataProviders - that way it would work in the same way as Grid and ComboBox;
There a bug in the demo. If I type something random, like "asdasd", and then press enter, the app still tries to find images related to that. There should be some validation;
And talking about validation, have you tried using it with Binder?
Is there a way to change how the autocomplete matches the results? Suppose that instead of startsWith I'd like to use contains.

Feedback

Gilberto's Feedback

My 2c, and questions:

Use limit -1 to indicate the lack of limit, instead of zero;
It would be more convenient to just provide a lambda to retrieve the options, instead of a change listener;
If you want to lose your sanity, consider providing support for DataProviders - that way it would work in the same way as Grid and ComboBox;
There a bug in the demo. If I type something random, like "asdasd", and then press enter, the app still tries to find images related to that. There should be some validation;
And talking about validation, have you tried using it with Binder?
Is there a way to change how the autocomplete matches the results? Suppose that instead of startsWith I'd like to use contains.

Recommend Projects