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?
Why “but” there? Do
TextChangeEvents some problem? You can tune the eagerness of the events with the event mode, even as milliseconds. Example is
here .
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 .