Quick Search Example

Quick Search Advanced

Add a search / filter input to a list, table or set of div elements.

  • Person 1
  • Place 2
  • Thing 3
  • Thing 4

Integration with OmniUpdate

Basic styles and javascript are integrated in the global templates. Custom styles and data feeds are the responsibility of the web developer.

HTML

  1. Create the input form element
  2. Create a table, nested div, ul or ol with child elements containing the data
Input Example
<input name="search" placeholder="Search here" type="text" data-list="#hs-data"
  data-nodata="No results" data-highlight="true" autocomplete="off" data-toggle="hideseek" class="form-control"/>
placeholder="Search here"

  • text

    Displays in the input before search text is entered.

data-list="#hs-data"

  • selector

    CSS selector for the data container. Usually an ID, but can be a class.

data-nodata="No results"

  • text

    Text displayed when no elements match the search string.

data-highlight="true"

  • boolean

    True wraps the found string in <mark class="highlight"/>. By default, it looks like this.

Data Container Example
<ul id="hs-data">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

Default styling of the search input is provided. The data container and items may be styled as needed.

JavaScript

Based on HideSeek.js.

Default behavior is triggered based on data attributes by src/js/hideseek-local.js.

No page-specific JavaScript is required.

Online Examples

TODO: include site footer