Learn how to prototype web and mobile apps

How to simulate a real-time predictive search in your interactive prototypes

In this tutorial, you will learn how to include real-time predictive search in your interactive prototypes. You will be able to trigger a search in a DataList each time the user types a letter in the search box.

You can download an example here.

Simulate predictive searches - UI prototypes

  1. In a new web prototype, create a Data Master called “Names” with 3 fields: First Name, Last Name, Sort Name. Click OK.
  2. Double click on the Data Master you’ve just created and go to the tab “View and edit records“. Add in names, last names and sort names (sort names should follow the format Last Name, First Name i.e. Doe, John). Click OK.

Predictive search in UI prototype: Data master details

  1. Add a Data List to the canvas, selecting the Data Master you’ve created and only the “Sort Name” field. Click OK.
  2. Drag an Input text field onto the canvas. Add an “On Keyboard > On Key Up” + “Set Value” event to it. In the events dialog, select the whole Data List as the component that will display the value.
  3. At the bottom of the event value, select “Calculate” and click on the “Add Expression” link. Build the expression displayed in the image below, adding (in this sequence) the FILTER data function, the Data Master (from the Data Master tab), the Sort Name Attribute (from the Data Master tab), the HAS text function and the Input text field:

Predictive search in UI prototype: events

That’s it! You can now click on “Simulate”. You will see that if you type “Jon” in the search field, the list will only display the field that contains the word “Jon”.

Thanks to Sean Sloan for sending us this tutorial!

Next tutorial: Operations with Data Masters