How to mimic the "AutoCompleteTextField" component using a set of "Container" components

[Rubén V]

Hi,

Image in link https://www.dropbox.com/sh/dc1gdojv0n9xckr/AACikQWiPZ7VTXaaOgtdYhepa?dl=0

The image number 57 shows the list of articles that have already been selected. In order to include a new article, it is necessary to write the name in the search field that appears at the top (txBusqueda).

Image 58 shows the information search by typing the word "sa" in the "txBusqueda" field.

As you can see, the list of containers covers the search field and does not allow it to slide vertically.

Image 60 shows the search for information by typing the word "sal" in the "txBusqueda" field.

Although the "txBusqueda" field is not visible, it allows you to continue writing and the list does not appear below the mentioned field.

To filter on the "txBusqueda" field I have the following code:

        

        txBusqueda.addDataChangeListener((i1, i2) -> {

            String t = txBusqueda.getText();

            if (t.length() < 1) {

                for (Component cmp : popup) {

                    Orden2 o2 = (Orden2) cmp.getClientProperty("registro");

                    if (o2.enPedido.get()) {

                        cmp.setHidden(false);

                        cmp.setVisible(true);

                        

                    } else {

                        cmp.setHidden(true);

                        cmp.setVisible(false);

                    }

                }

            } else {

                t = t.toLowerCase();

                for (Component cmp : popup) {

                    Orden2 o2 = (Orden2) cmp.getClientProperty("registro");

                    boolean show = false;

                    String val = null;

                    if (cmp instanceof Container) {

                        val = (String) cmp.getClientProperty("busqueda");

                    }

                    show = val != null && val.toLowerCase().indexOf(t) > -1 && !o2.enPedido.get();

                    cmp.setHidden(!show);

                    cmp.setVisible(show);

                }

            }

            popup.animateLayout(250);

        });

To add the popup window I have the following code:

    private void addPopup() {

        final Form f = getComponentForm();

        popup.removeAll();

        popup = contenedorOrden2(false);

        popup.setScrollableY(true);

        

        byte[] units = popup.getStyle().getMarginUnit();

        if (units != null) {

            units[Component.LEFT] = Style.UNIT_TYPE_PIXELS;

            units[Component.TOP] = Style.UNIT_TYPE_PIXELS;

            popup.getAllStyles().setMarginUnit(units);

        }

        popup.setOwner(txBusqueda);

        int popupHeight = txBusqueda.getAbsoluteY() + txBusqueda.getHeight();

        popup.setPreferredW(getWidth());

        popup.setWidth(getWidth());

        popup.layoutContainer();

        

        Style sPopup = popup.getUnselectedStyle();

        sPopup.setBgTransparency(255);

        sPopup.setBgColor(0x800080);

        sPopup.setMarginUnit(Style.UNIT_TYPE_DIPS);

        sPopup.setPaddingUnit(Style.UNIT_TYPE_DIPS);

        sPopup.setMargin(1, 1, 1, 1);

        if (f != null) {

            if (popup.getParent() == null) {

                Container lay = f.getLayeredPane(txBusqueda.getClass(), false);

                lay.setLayout(new LayeredLayout());

                Container wrapper = new Container();

                wrapper.add(popup);

                lay.addComponent(wrapper);

            }

            f.revalidate();

        }

    }

How do I make the popup window stay below the "txBusqueda" field, stay centered and allow it to scroll vertically?

[Shai Almog]

Hi,
That's a bit problematic for a popup.

You can use a search toolbar option which will replace the title in place.

Alternatively, you can place the whole container in a border layout center. Then when you want to search just add search to the NORTH location. It will always stay above.

I'm not sure what you're trying to accomplish by using a popup?

[Rubén V]

Hi,

My idea is to simulate the "AutoCompleteTextField" component.

Because I do it with a set of containers: In each element or container I save a record from the database in the client properties. This makes it easier for me to manage the programming because there may be products with the same name but different coding. Additionally I can create a special design for the container that represents each record. If an element is selected I can modify the container and expand or minimize information.

From everything she wrote to me, I am not sure how I make the container slide vertically.

[Shai Almog]

Hi,
you can do that but it's pretty hard to implement. If you look at the source code of AutoComplete it's pretty much filled to the brim with hacks to get all the nuances working. The current auto complete doesn't allow nested scrolling since the parent form would grab the scroll events so this isn't something we did there either.

[Rubén V]

Thanks for support.