14 Search

The Search opens an overlay that allows the user to search the entire site.

Usage with HTML Attribute

Multiple elements are used for the search: a search overlay, a search button, and a search input field for mobile.

Search Overlay

The attribute data-aau="search" has to be placed on the search overlay container. It automatically uses the search plugin.

<div data-aau="search"
    id="search-overlay"
    class="overlay-search"
    data-target="#primary"
    data-resultsurl="http://example.com/api/ajax/search"
    data-resultstype="POST"
    data-autocompleteurl="http://example.com/api/ajax/autocomplete"
    data-autocompletetype="POST">
  <div class="row">
    <div class="search-header marged_tablet clearfix">
      <a href="#" class="icon-close-large"></a>
      <div class="search-field">
        <input type="text" value="" placeholder="Begin typing to search"/>
      </div>
    </div>
    <div class="marged">
      <div class="hr hidden_small visible_tablet"><hr/></div>
      <ul class="search-completion">
      </ul>
    </div>
  </div>
  <div class="search-result"></div>
</div>
Search Button

The attribute data-aau="searchbtn" automatically uses the element as a button to open the search overlay.

<li data-aau="searchbtn">
  <a href="javascript:void();">
    <span class="icon-search"></span> Search
  </a>
</li>
Search Input Field for Mobile

The attribute data-aau="searchfield" automatically uses the field as the search input (only for mobile). Then a click on the field opens the search overlay.

<input type="text" data-aau="searchfield" value="" placeholder="Begin typing to search"/>

Usage with Javascript

$('#search-overlay').search();

HTML Attributes

Name Type Default Required Description Example
data-autocompleteurl String '' no Script called to get the autocomplete results through Ajax. If no script is specified, there is no autocomplete feature.
<div data-aau="search"
data-autocompleteurl="http://[EXAMPLE_URL]">
  ...
</div>
data-autocompletetype String 'GET' no Request type of the autocomplete Ajax call. Two methods are available: 'GET' or 'POST'.
<div data-aau="search" data-autocompletetype="POST">...</div>
data-delay Number 700 500 Delay in milliseconds between when a keytouch happens and when the autocomplete request is performed. The value 0 makes it immediate, but it also becomes less responsive (more loads of data).
<div data-aau="search" data-delay="700">...</div>
data-esckey Boolean true no Indicates if the overlay is closed when the ESC key is pressed.
<div data-aau="search" data-esckey="false">...</div>
data-resultsurl String '' yes Script called to get the search results through Ajax.
<div data-aau="search"
data-resultsurl="http://[EXAMPLE_URL]">
  ...
</div>
data-resultstype String 'GET' no Request type of the search Ajax call. Two methods are available: 'GET' or 'POST'.
<div data-aau="search" data-resultstype="POST">...</div>

Using Options with Javascript

You can use the options with Javascript by passing them in an object without the prefix "data-" in the option name.

$('#search-overlay').search({
  resultsurl: 'http://[EXAMPLE_URL]',
  resultstype: 'POST'
});

Methods

Name Parameter Description Example Live demo
open Open the search overlay $('#search-overlay').search('open')
close Close the search overlay $('#search-overlay').search('close')

Ajax

Two scripts are loaded through Ajax in this plugin : autocomplete and search.

Autocomplete

This script defined in data-autocompleteurl must load the results for the autocomplete feature. The results will then be filled in the ul.search-completion element.

Parameter
Name Type Default Required Description
keyword String '' yes First characters typed into the search input field.
Note on Security

An escape function is used to clean all the punctuation and extra space in the keyword. The keyword is also sent in a lowercase format.

Response HTML Structure (see example)

The script must return HTML data respecting the following structure :

<li>architecture</li>
<li>advertising</li>
<li>about us</li>
<li>administrative office</li>
<li>...</li>
<li class="info hidden_small visible_tablet">Press enter to search</li>
Search

This script defined in data-resultsurl must load the results of a search. The results will then be filled in the div.search-result element.

Parameter
Name Type Default Required Description
keyword String '' yes Keyword(s) used to search.
cat Number no Category value. This value is the data-value="" in the categories list or the (value="") in the categories dropdown.
page Number no Page index. This makes the infinite loading works. Original default value is 1 (first page). Every time the bottom of the search page is reached, this value is incremented to retrieve the next page of results.
Note on Security

An escape function is used to clean all the punctuation and extra space in the keyword. The keyword is also sent in a lowercase format.

Response HTML Structure

The script must return HTML data respecting this structure.

Live Example

The Search button in the header of the page opens the search overlay.

Sign In