Skip to content
Dimitris Krestos edited this page Jan 20, 2017 · 8 revisions

Table of Contents

Setup instructions

Include jQuery at your document's footer

<script type="text/javascript" src="jquery-2.0.2.min.js">

Include HideSeek

<script type="text/javascript" src="jquery.hideseek.min.js">

Create the following html structure

<input id="search" name="search" placeholder="Start typing here" type="text" data-list=".list">
<ul class="list">
  <li>item 1</li>
  <li>...</li>
  <li><a href="#">item 2</a></li>
</ul>

or

<input id="search" name="search" placeholder="Start typing here" type="text" data-list=".list">
<div class="list">
  <span>item 1</span>
  <span>...</span>
  <span>item 2</span>
</div>

or any similar structure... e.g. using tables.

Initialize HideSeek using the following two ways

Default way

$(document).ready(function() {
	$('#search').hideseek();
});

Using a data attribute

<input id="search" name="search" type="text" data-toggle="hideseek" data-list=".list">
...