This tutorial walks through how to create a dynamic search input field, where matching results are displayed and updated as the user types.

Here is a sample, which you can copy into your own account: https://app.atomic.io/d/9zcgXcpITZO2
 

Step 1: Add a text input to capture the search term

Open up a new prototype, and add a text input to the canvas. Select the ‘Text Input’ tool or press ‘F’. In the properties panel you’ll see an ‘Input’ section with customisation options, such as adding a hint and modifying the fill. 

Rename the text input in the layers panel from ‘Text Input’ to searchInput

Select the input on the canvas, and then add an action on ‘Keypress’ to run the follow JavaScript:

doSearch(text(SELF));

 

Step 2: Add a placeholder component for the search results

Place the elements on the canvas that you would like to make up one of the results tiles. 

We’ll add a text element for:

  1. What the name of the animal is — with the layer name 'name'
  2. What a group of the animals is called — with the layer name 'group'

Tip: to keep things easy to manage, we recommend keeping all of the layer names in lowercase or camelCase. 

Select only the elements that make up the results tile, and then click on ‘Create reusable component’ in the top toolbar, or use the keyboard shortcut ⌘3.

Name the component 'resultTile'. 

Double click on the component instance to open it, and name the page 'Item'. 

Duplicate the Item page. Delete all of the elements on it, and rename the duplicate page 'Blank'. 

Reorder the pages, so that ‘Blank’ is on the top. 

Click ‘Back’ to go back to the main level of the prototype. 

Duplicate the component, for the number of instances you would like to display in the results. For this example, duplicate it 7 times, to make a total of 8 instances. 

Group all of these component instances into a container — for example a scrolling container, if you would like the results to be scrollable. 

If you’d like the results to be scrollable, select all of the instances, then in the top menu select “Create scroll container”. 

Rename the first component instance ‘result0’, the second ‘result1’ and so on, for all of the placeholder search result slots. 

Finally for this step, set the state of all instances to ‘Blank’.
 

Step 3: Add Javascript to select the result

Open any instance of the component, and navigate to the ‘Item’ page.

Add a hotspot over all of the elements. Type ‘H’ or select the hotspot tool, then drag a box directly onto your page.

Add an action to evaluate a script expression using Javascript, and add the following code:

// get the name of the selected result
const resultName = text(SELF.slice(0, -1).concat(["name"]));

// pass the name to a custom function
resultSelected(resultName, $p);

Finally for this step, back out of the component using the ‘Back’ button.
  

Step 4: Add variables for each item in your sheet

In this step you’ll add a variable for each item in your sheet that you would like to display on a detail page.

Click the Manage Project Variables button (or via the keyboard shortcut: 'V'). Add the following variables:

  1. name
  2. baby
  3. female
  4. male
  5. group

Step 5: Add a details page

Rename the first page of the prototype to ‘Search’. 

Duplicate this page, and delete every element off it. 

Rename the duplicate (blank) page to ‘Detail’. 

Add text elements to the canvas, and link them to the appropriate variable. 

Tip: You may also like to add a back button to this page, with an action to return to the ‘Search’ page when clicked.
 

Step 6: Add Javascript

The following JavaScript code is the engine behind this prototype. 

Add a Timer based page action (at 0ms) to run the following JavaScript:

const SEARCH_DATA = data("animals");
const SEARCH_PAGE = SELF;
selectedResultData = [];

// Autofocus the search input (limited mobile support)
focus(SELF.concat(["searchInput"]));

resultSelected = function(selectedResult) {
  console.log("resultSelected:", selectedResult);

  // Find the matching result from the dataset
  selectedResultData = SEARCH_DATA.filter(function(obj) { return obj.name === selectedResult });
  const data = selectedResultData[0];

  // Pass bits of data from the matched result to project variables used elsewhere in the prototype
  $p.name = data.name;
  $p.baby = data.baby;
  $p.female = data.female;
  $p.male = data.male;
  $p.group = data.group_noun;

  // Navigate to the Details page
  goto("Details", "slide-left", "ease-in-out", 250, 0);
}

displaySearchResults = function(results) {
  console.log("displaySearchResults:", results);

  // Loop through all result slots
  for(let i=0; i<12; i++) {

    // Set up the paths to the list item elements we're going to update
    let pathToResultComponent = SEARCH_PAGE.concat("result" + i);
    let pathToNameElement = pathToResultComponent.concat(["Item", "name"]);
    let pathToGroupElement = pathToResultComponent.concat(["Item", "group"]);

    // Work out whether this result slot should be empty or be given a search result
    if(results[i]) {
      // Change the item to visible
      state(pathToResultComponent, "Item");

      // Apply results data to this component's elements
      text(pathToNameElement, results[i].name);
      text(pathToGroupElement, results[i].group_noun);

    } else {
      // Change the item to hidden
      state(pathToResultComponent, "Blank");
    }
  }
}

doSearch = function(searchString) {
  console.log("doSearch:", searchString);

  // Prepare to do a regex match
  const re = new RegExp(searchString, "i");

  // Match the search string against all `name` values from the data
  // Add results to a new list

  let matchedResults = [];
  SEARCH_DATA.forEach(element => {
    if(element.name.match(re)) {
      matchedResults.push(element);
    }
  });

  // Call the function that passes results data into the item components
  displaySearchResults(matchedResults);
}

 

Step 7: Upload the data source 

To help get you started, we’ve made a spreadsheet with some animal data (for this tutorial), and some country and user data. Make a copy and save it to your own account:

Example Search Data

Once you have the data in the spreadsheet, upload it up to your project. 

  1. In your project, select the Data tab.
  2. Select ‘Import Data’ and follow the instructions to link your Google account and import a spreadsheet.

In Atomic, rename the data source to ‘animals’. 

If you make any changes to the data source, manually sync the changes from the data sources list.

Tip: If you're linking to images in your data sheet, we recommend ensuring the URL is point to an HTTPS, not HTTP link.

See more on: Using data in your prototypes

 

Step 8: Preview

Use the keyboard shortcut Command + Enter, or select ‘Preview’. You can now search for any animal in the data source, and have all of the results that match the search appear in the results.

Did this answer your question?