Simply type in the field below to see it in action!
The primary element here is the text field, with the ID #autoInput, the javascript will detect when a user inputs text here, when it see this it'll display the #searchTermsWrapper element which then contains your list of search terms, these will be filters to match the users input.
Avoid styling the #searchTermsWrapper element, instead style the link element with the .list-term class, you can see this in the list, make sure to hide it by default so it doesn't appear in your search terms.
The only time you'll need to edit the javascript is to add search terms, simply add an item to the Terms array. You can find this in the body code in the page settings. You can use a CMS collection as the source of your results, reference the example here.
Don't be tempted to remove the search-terms-wrapper or the list inside it as they both play a part in the javascript (one controls when this element appears the other element is populated with the content from your search term array.)