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.
  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).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 to include.
  4. Drag an Input Text field to the Canvas. Add an “On Keyboard > On Key Up” + “Set Value” event to it, selecting the whole Data List as the target of the action. For the value, click the ‘Calculated’ radio button and the ‘Add Expression’ text. You’ll see the Calculated Expression builder appear.
  5. In the builder, follow these steps to create the expression:
    1. Drag the “Filter” function to the open space in the expression.
    2. Drag the Data Master (from the Data Master tab in the builder) to the first open space that appears.
    3. Drag the the “Sort Name” Attribute (from the Data Master tab) next to it.
    4. Drag the “Has” function next to the attribute.
    5. Lastly, drag the the Input Text Field next to the “Has” function.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.