In this short tutorial we’ll show you how you can add auto-suggest functionality to your prototype’s inputs.
Don’t feel like reading? Don’t worry we got you covered. Sit back, relax and let us run you through it in this video!
Example Setup
To explain you how this functionality works in weave.ly we’ll be using an example. The figure below shows the example’s design in Figma. Concretely, the example contains three important parts. First, the main frame contains a search bar. Once the user focuses on the search bar (i.e. by clicking) it will open the auto-suggest box. Second, we’ve created a card component (see top of the Figma canvas) that provides the style for a single suggestion. Finally, we’ve created an overlay which contains instances of this suggestion card. We’ve set the overlay to manually open itself right underneath the search bar.
Tagging the Example in the Plugin
We’ll briefly touch upon the tags used to build our example. The text layer in our search bar is tagged with the Text Input functionality (see image below).
If you’re unfamiliar with how the plugin works and how tags are used in weave.ly we suggest you start here first.
The frame containing instances of our suggestion component is tagged with the List functionality. This will enable us to populate the list with suggestions provided in a data table (see image below).
Note that the frame tagged with the List functionality is itself (i.e. Frame 1) wrapped in a frame which represents the actual overlay (i.e. Frame 2).
Example in the Flow Editor
Our example has been setup in the weave.ly flow editor as follows. First, a table has been created which contains example suggestions, as shown below.
Moreover, we’ve already linked our table to our list of suggestions as shown in the figure below. Concretely, we mapped the Initials, Name and Title columns in the table to their corresponding Figma layers in the card design (see the configuration panel on the right)
The result of this example setup is shown in the gif below. Our list of suggestions is correctly populated with the data and shown when the user focuses on the search bar, but it does not yet suggest results based on what the user types. Nor can a user select a specific suggestion.
Building the Auto-Suggest Functionality
Our example starts with a working list of suggestions and a working input field for our search bar, the question is how to make sure that the suggestions adapt based on the user’s input. To do this we’ll use the table block’s filter configuration. Using the configuration panel on the right (once a table block is selected) you are able to configure on which columns you want to filter. Moreover, you’re also able to determine how you want to filter (e.g. for text values you can choose from contains, exact match, starts with, etc. while for numeric values you can filter using arithmetic comparators).
In our example we want to filter suggestions based on name, and we’ll filter anything that contains the given piece of text (see image above). We can now connect our search input to the table block (see image below).
We now have a list of suggestions that automatically updates based on what the user enters in the input field. You could call it an … auto-suggest of some sort.
For the final touch we need to ensure that our search bar shows whatever the user selects (i.e. by clicking on a suggestion in the overlay list). This can be done in two steps.
First, whenever a user clicks on a suggestion we automatically receive the corresponding row in the data table from the List block (i.e. through the List block’s red output port). We can get the data from this row using the GetRow block as shown below.
If your List block does not have a red output port it means that the main component used in the list does not have an interaction specified in Figma. In our case an empty click interaction was specified on the suggestion card.
From the output ports of the GetRow block we are able to extract any information we want to show in our input field. In our example we’ll show the suggested name. We connect the Name output port of the GetRow block with the optional “placeholder” port of our TextInput block (i.e. the one on top of the block) as shown below. Moreover, we also close the overlay whenever the user selects a suggestion (i.e. by using the CloseOverlay block).
The end result is shown in the gif below. Our list of suggestions opens on focus, and automatically updates based on the user’s input. Suggestions can be selected by clicking on them, after which the name of the suggestion is filled in the search bar.
