In this Quick Tip, we're going to learn about the searchbox element.

This element searches for dynamic options and provides users with an autocomplete list when they start typing a word or address. The searchbox element will match the options in real time to whatever the user is typing.

First, we must choose where the searchbox element finds its choices. They can be static, dynamic, or geographic places.

For geographic places to be searched, you need to have the Google Map API keys configured in the Settings tab. To learn more, look for our tutorial on how to set up the Google API.

With dynamic choices, we define a list of options from our data types. For this searchbox, we'll tell it to find choices from the User database. Then, we choose which field on the User we want the search box element to autocomplete results for. In this case, we want it to look for a user's name.

We can further constrain this search, like we would when using the Do a Search for expression. We can then sort it and ignore empty constraints.

Now, when users use the searchbox element and look for other users by name, they will be presented with the autocomplete list that is searching from the User database.

We have some additional properties that we can utilize with the searchbox element—like allowing entries that are not in the list. While typing with this checked, users can still search for something that isn't in the database, and we can still access what it is they typed with Searchbox's typed text.

We can also pick the maximum entries to show in the autocomplete list, since the longer the list, the longer it will take to load.

Finally, we can prevent the enter key from submitting, which means any workflow that would trigger using this element won't.

Experiment more by adding your own searchbox element to your app.

That's it for this Quick Tip! For more, be sure to check out bubble.io/academy.