Streaming live at 10am (PST)

List / Page Section Search


#1

Hey,

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

Here’s the link to the Jquery plugin - http://vdw.github.io/HideSeek/
And the github page - https://github.com/vdw/HideSeek

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:

Custom Code

<script type="text/javascript" src="https://rawgit.com/vdw/HideSeek/master/jquery.hideseek.min.js"></script>

<script>
$(document).ready(function() {
	$('#faq-search').hideseek();
})
</script>

Searchable List

  • 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>

Input Field

  • 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”
    image

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.