UXPin logo

Autocomplete Search Field

This tutorial shows how to simulate an autocomplete search field using Conditional Interactions and Expressions. Use this foundation to create a more complex search component or an entire application.

→ Download a ready .uxp file for this tutorial.

Setting up the Design

  1. Select Input under Forms... from the Quick Tools and click anywhere on the canvas to create an input element.
  2. Select Icon from Quick Tools and click inside the input element to add an icon.
  3. Use Search icons in the Properties Panel to find a search icon (or any icon you prefer). Change the icon's dimensions to 53 wide x 53 high. Select the icon and search field and press Alt "Y" to align it to the middle. Place the icon in the far right corner at your discretion.

Creating the search results elements

  1. Select Rectangle from the Quick Tools or press "R" on your keyboard and click below the search field. 
  2. Change the rectangle's dimensions to 498 wide x 47 high in the Properties Panel. 
  3. Select Text from the Quick Tools or press "T" on your keyboard and click inside the rectangle.
  4. Select the text element and rectangle and press Alt "X" , and then Alt "W" . This will align the text element to the top center of the rectangle shape.
  5. Select the Rectangle under Pages & Layers. Change the Fill to #FFFFFF in the Properties Panel.
  6. Rename the Rectangle in Pages & Layers to 'bg 1.'
  7. Select the text element under Pages & Layers and rename it 'TEXT 1.'
  1. Select bg 1 and TEXT 1 in Pages & Layers by holding "Shift" and clicking each one. With both selected, press Ctrl "G" to group the elements. Rename this group to 'search results 1.'
  2. Select search results 1 in Pages & Layers, and press Ctrl "D" twice to create two duplicates. 
  3. Rename the duplicate groups 'search results 2' and 'search results 3.'
  4. Also, rename the text and rectangle elements: 'TEXT 2' and 'bg 2' in search results 2, and 'TEXT 3' and 'bg 3' in search results 3.
  1. Select Box from the Quick Tools or press "B" on your keyboard and click below the search field and above the first search results element.
  2. Change the new box element's dimensions to 495 wide x 27 high in the Properties Panel and change the Fill to #D3ACFF with an opacity of 50%.
  3. Double-click inside the box to activate text and type 'BLOG.' Under TYPOGRAPHY in the Properties Panel, align the text left.
  4. Select the three search results groups and the box, and press Alt "X" to center align the elements, then Ctrl "G" to group them. Rename this group to 'Search Results.'
  5. Hold Ctrl and click the Search Results and Input. Press Alt "X" to center align the elements. Change Gap Vertical in the Properties Panel to 12.
  6. Hide the Search Results group by clicking the eye icon in Pages & Layers.

Styling the search results

  1. Select search results 1 in Pages & Layers.
  2. Click Interactions + at the top of the Properties Panel.
  3. Under Trigger, select Mouse Over.
  4. Under Action, click More..., and select Color.
  5. Select bg 1 from the Element dropdown.
  6. Under Change color to edit the color properties of Fill to, e.g. #E6EFF7
  7. Click Add to save the interaction.
  8. Click New interaction.
  9. Under Trigger, select Mouse Leave.
  10. Under Action, select More..., and select Color.
  11. Select bg 1 from the Element dropdown.
  12. Under Change color to edit the color properties of Fill to, e.g. #FFFFFF
  13. Click Add to save the interaction.
  14. With search results 1 still selected press Ctrl "Shift" "C" to copy the interactions. Select search results 2 in Pages & Layers and press Ctrl "Shift" "V" to paste the interactions. Repeat for search results 3.
  15. Go into the two Interactions for search results 1 & 2 and change the Element dropdown to bg 2 and bg 3, respectively.

Showing/hiding Search Results

  1. Select the Input element in Pages & Layers.
  2. Click Interactions + at the top of the Properties Panel.
  3. Under Trigger, select Value Change.
  4. Under Condition, select Content of element, then Input from the second dropdown and "Is not empty" below that.
  5. Click Add condition to save.
  6. Under Action, select Show.
  7. Select Search Results from the Element dropdown.
  8. Click Add to save the interaction.
  9. Click New interaction.
  10. Under Trigger, select Value Change.
  11. Under Condition, select Content of element, then Input from the second dropdown and "Is empty" below that.
  12. Under Action, click Hide.
  13. Select Search Results from the Element dropdown.
  14. Click Add to save the interaction.

Autocomplete Search Results

The following interactions will simulate the autocomplete functionality.

  1. Select the Input element in Pages & Layers.
  2. Click Interactions + at the top of the Properties Panel.
  3. Under Trigger, select Value Change.
  4. Under Action, click More..., and select Set Content.
  5. Select TEXT 1 from the Element dropdown.
  6. Under Set content as select Expression. In the input field type: 
concat("Beautiful Interior Designs"," ",capitalize('Input'), "s")

7. Click Add to save the interaction.

  1. Click New interaction.
  2. Under Trigger, select Value Change.
  3. Under Action, click More..., and select Set Content.
  4. Select TEXT 2 from the Element dropdown.
  5. Under Set content as select Expression. In the input field type: 
concat("Council of Fashion", " ",capitalize(concat('Input',"s")), " of America")

Click Add to save the interaction.

  1. Click New interaction.
  2. Under Trigger, select Value Change.
  3. Under Action, click More..., and select Set Content.
  4. Select TEXT 3 from the Element dropdown.
  5. Under Set content as select Expression. In the input field type: 

concat(upperCase('Input'), " ","IDEAS BLOG")

Click Add to save the interaction.

You now have a functional autocomplete prototype. Feel free to change the search results to meet your prototyping requirements.