I’ve just implemented a Jquery plugin called HideSeek to give live search results on a page for a list of items. It’s pretty simple.
Here’s the live page - https://www.origina.com/faq
And here’s a JSFiddle of it - https://jsfiddle.net/diarmuids/6y253pgz/
To get it working, I added the following custom code in the footer:
- The items to be searched are contained within a div with a class “faq-list-list” i.e.
<div class="faq-list-list"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div>
- I dragged in an input field by holding down alt + dragging it onto the canvas.
- I gave this input field an id of “faq-search”.
- I gave this input an attribute of name “data-list” and value “.faq-list-list”
There are lots more cusomtisations which can be made. See the plugin demo page for examples - http://vdw.github.io/HideSeek/
I hope that makes sense. Any questions, just ask.