Find as you type

Hi all

we successfully implemented a “find as you type” with a ComboBox.
However, the users are confused with this as they except data in there but there isn’t before he starts typing.

Is there a way to implement a “find as you type” with a textfield?
Our style the combobox so that it looks exactly like a textfield at the beginning?

Thanks

Regards Michael

Hi,

In our project, we’ve implemented our own find-as-you-type with a combination of Textbox and the Overlay add-on; we don’t actually start searching (or indeed showing the overlay) until 2 or 3 characters have been entered (and the user pauses for a second) but that’s easily changeable.

I’m afraid I can’t share my code with you (it’s got lots of irrelevant stuff in it), but I thought I’d point out that it’s not too tricky to implement your own.

Cheers,

Charles

Thanks for the hint, that sounds very good, I’ll give it a try.

Regards Michael

You can hide the drop down arrow using CSS and then style the input field differently. It is a bit cumbersome, but can be done.

Another option is to use a plain TextField and add TextChangeListener to it and present the matches in some popup or layout.

Hi Jouni

thanks for your answer. Can you give me any hint on how to CSS the arrow away? It have seen that is a

.

Ok, I think I managed it with some ugly css:


/*************************************************************************************************
   Customize the comboxboxes in the blue boxes so that the arrow disappears
 *************************************************************************************************/
.v-filterselect-input {
    border: 1px solid;
    background: #fff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 150px;
    margin-left: -2px;
}

.v-filterselect-button {
    color: white;
    background-image: none; 
    width: 0px;
    display: none;
}

Thanks all for your hints.

Thanks for the CSS solution :slight_smile:

See also https://vaadin.com/forum/-/message_boards/view_message/748294

I even have another one where the comboboxes look exactly like simple textfields:

.v-filterselect-input {
    border-right: 1px solid #b7b8b9;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 4px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 4px;
}

.v-filterselect-focus .v-filterselect-input {
    border-right: 1px solid #5B97D0;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 4px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 4px;
}

.v-filterselect-button {
    color: white;
    background-image: none; 
    width: 0px;
    display: none;
}

Have fun and free beer. :slight_smile:
Michael