Designing predictive search in a Data List

With Justinmind, you can include real-time predictive search in your prototypes. In this tutorial, learn how to trigger a search in a Data List each time the user types a letter in the search box.

Simulate predictive searches - UI prototypes

To design predictive search in your Data List, follow these steps:

  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 “View and edit records” tab. 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
  3. Add a Data List to the canvas, selecting the Data Master you’ve created and only the “Sort Name” field. Click “OK”.
  4. Drag an Input Text field to 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.
  5. Below, select “Calculate” and click on the “Add Expression” link. Build the expression displayed in the image below, adding (in this sequence) the “Filter” function, the Data Master (from the Data Master tab), the “Sort Name” Attribute (from the Data Master tab), the “Has” function and the Input Text Field:
    • Predictive search in UI prototype: events

And that’s it! Click “Simulate” to interact with your prototype. You will see that if you type “John” in the search field, the list will only display the field that contains the word “John”.

You can download our example here.