How to display images within dropdown box?

Have a look at the free Search & AutoCorrect plugin. Install that.

  1. Use an input field instead of a search box.
  2. Build a simple RG in a Group just below the input field that looks like a dropdown and put your image and text in the RG just as normal using a Do a Search for. Then set the group to be hidden on page load and put a condition on it that it is visible when the input field is focused.
  3. Drop the Search& AutoCorrect element onto the page (it will be invisible in run mode) and point it to the input box and tell it which fields to search.
  4. Go back to the RG and set a condition ‘When input field is value is not empty’ then Data Source = Search & AutoCorrect’s matches.
  5. Now build a simple workflow that when a user taps an element in your ‘fake’ drop-down, that the value of the input field is set to that cell.

That plugin is one of the plugins I use most often. Take a look at this thread for more information and for links to a live demo and the editor to see how it was used New Plugin- Fuzzy search and autocorrect, custom search boxes the demo even has a dropdown with book images and associated text like you say you need.

3 Likes