Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
I need a search field that I can add to my web app which will narrow the results (filter) shown on a `TreeTable`. Or, if a particular pattern is entered into it, it would retrieve one item from the database and show it on the `TreeTable`.
I know that a simple `TextField` should suffice, but I'd like to have it do a search-as-you-type ability. You know, so about 180ms after the last character is entered in the field, it would perform the search/filter on the `TreeTable`. In addition, I'd ideally like to also have a search button on the right side of the field, just in case--probably with a magnifying glass icon--that turns into a "clear the field" button--with an "X" icon--if the field isn't empty.
I've done some searching and cannot find a native component in Vaadin nor an Add-on that works with Vaadin 7. I've used JXSearchField with my desktop app; is there some way I could create my own "SearchField" object that extends `TextField` and basically includes all the same stuff from JXSearchField?
I know that a simple `TextField` should suffice, but I'd like to have it do a search-as-you-type ability.
My apologies, Marko. I was entirely unaware of the TextChangeEvent capability. You are correct in that it will work great for a search field. It still doesn't get me the magnifying glass icon that identifies it as a search field, but a "Search:" Caption should work okay for that. It also doesn't have the capability of having an "X" appear near its right edge to clear the field, but I can live without that.
Now I just need to figure out the nuances of CssLayout so I can have it be centered and responsive, they way I intend. If I have trouble with that, I'll post it in a separate thread. Thanks, Marko!
Ok, great, I wasn't sure if you had noticed it. Maybe it's a bit too inobvious feature.
There's the TEXTFIELD_INLINE_ICON icon style that places the icon inside the TextField, at least in some layouts. For the "X", there's the ResetButtonForTextField add-on.