Autocomplete text field (like a search field)

Hi all,

New to Xojo Web but fairly experienced with Desktop.

I’m trying to create a page with a textfield that once the user enters a few characters, the server does a database lookup and pops up suggested searches in a list below the field that the user can either click on or use arrow keys to select from.

From a functionality standpoint, I’m looking to create something identical to how the search field works on YouTube.

I see there’s WebTextField.AllowAutoComplete but I don’t see a way to add autocomplete suggestions dynamically or show a popup list like that.

Has anyone implemented anything like this? Not quite sure where to even start.

Did you look at the webcombobox?

2 Likes

Depending on the amount of rows and how dynamic it should be, a WebCombobox could do the trick, as @Maximilian_Tyrtania1 said.

But what it comes to my mind, when looking at the YouTube search, is a combination of a WebSearchField with a WebListBox that uses a WebDataSource.

Something like this:

Grabacindepantalla2024-08-01alas16.35.47.mp4-ezgif.com-optimize

2 Likes

GraffitiPopupMenu supports search functionality (among many other features), but not a direct connection to the database to reduce round trips and an API endpoint requirement.

GraffitiTextField also supports basic autocomplete.
image

1 Like

Thanks guys.

The round-trip latency on the server is really making it feel sluggish though. To be clear, if I want my autocomplete suggestions to be generated using client-side javascript (calling a third-party api to return json suggestions), I’ll need to use the WebSDK, is that correct?