Page Search

v0.0.0

The Page Search is the main search input element on the site.

Autosuggest is optional. Point data attribute data-endpoint to a valid endpoint to show the autosuggest.

Data attrbute data-noresults can be used to change the default text. (the %-sign is replaced with the search string).

Page Search is part of the Page component.

Options:

data-endpoint: (optional) the URL to an endpoint
data-noresults: (optional) to change the 'no results' text (i18n)
data-debounce: (optional) ms to postpone requesting endpoint, default 200ms.
data-min-chars: (optional) minimum chars required before starting to search, default 2.
data-submit-on-select: (optional) submit the form when a suggestion is selected, default true.

All data attributes except for data-endpoint, data-noresults, data-debounce, data-min-chars will be added as querystring parameters.

Format is data-{key}="{value}", where key is the name if the querystring parameters and value is the value.

<!-- Page Search -->
<div class="gw-page-search" data-endpoint="/api/page-search/results.json" data-language="en" data-min-chars="3" data-noresults="No results for % found" data-pageid="141768" data-resultsperpage="10" data-searchtype="US" data-siteid="5702">
  <div class="gw-page-search__bar">
    <form action="#sample" class="gw-page-search__form" method="get" novalidate role="search">
      <fieldset class="gw-page-search__set">
        <label class="sr-only" for="sg-2d32c3">Search</label>
        <input autocomplete="off" class="gw-page-search__input" data-tabindex-collapsed="4" id="sg-2d32c3" name="search" placeholder="What are you searching for?" required="" type="search" value="">
        <div class="gw-page-search__btn">
          <!-- Button type: search  -->
          <button type="submit" data-tabindex-collapsed="4" class="vi-btn-search vi-btn">Search</button>
        </div>
      </fieldset>
      <div class="gw-page-search__clear">
        <div class="gw-page-search__clear-inset">
          <div class="gw-page-search__clear-btn">
            <!-- Button type: search  -->
            <button type="reset" class="vi-btn-search vi-btn-search--clear vi-btn">Clear</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

JSON #

The autosuggest makes a GET request to the the url provided by data-endpoint with following parameter:

query string with the search query
other keys set by data attributes data-{key}="{value}"

Server should respond in JSON format an array of 'results'. Limit the result set at own discretion.

Each result has the following keys:

primary string primary search result
secondary (optional) string with secondary info.

An example of the JSON with one answer.

[{"primary":"Butcher leggings stumptown everyday narwhal put a bird on it. 90's hella microdosing butcher trust fund schlitz. Biodiesel pbr\u0026b 90's gluten-free asymmetrical retro. Knausgaard park readymade.","secondary":"optional category or site section"}]

Suggestion #

When the primary key contains the tag %suggestion%, select the tagged suggestion only.

[{"primary":"How about the word \"%suggestion%kerfuffle%suggestion%\"?","secondary":"optional category or site section"}]

When the suggestion key is provided, the value is considered wysiwyg content and visible in the dropdown

[{"suggestion":"\u003ch1\u003eI am very \"important\" and can potentially break 'everything'\u003c/h1\u003e"}]

Events #

When a suggestion is choosen, the event gw-page-search:selected is triggered with the suggestion data from the server.

See console.

<!-- Page Search -->
<div class="gw-page-search" data-endpoint="/api/page-search/results.json" data-language="en" data-min-chars="3" data-noresults="No results for % found" data-pageid="141768" data-resultsperpage="10" data-searchtype="US" data-siteid="5702" id="sg-9511b5">
  <div class="gw-page-search__bar">
    <form action="#sample" class="gw-page-search__form" method="get" novalidate role="search">
      <fieldset class="gw-page-search__set">
        <label class="sr-only" for="sg-3acebe">Search</label>
        <input autocomplete="off" class="gw-page-search__input" data-tabindex-collapsed="4" id="sg-3acebe" name="search" placeholder="What are you searching for?" required="" type="search" value="">
        <div class="gw-page-search__btn">
          <!-- Button type: search  -->
          <button type="submit" data-tabindex-collapsed="4" class="vi-btn-search vi-btn">Search</button>
        </div>
      </fieldset>
      <div class="gw-page-search__clear">
        <div class="gw-page-search__clear-inset">
          <div class="gw-page-search__clear-btn">
            <!-- Button type: search  -->
            <button type="reset" class="vi-btn-search vi-btn-search--clear vi-btn">Clear</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
<script>
  $("#sg-9511b5").on('gw-page-search:selected', function(event, data) {
    console.log(data);
  })
</script>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascript is required to display this component.

Download Page Search JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

FIX

  23 Jun 2023 - Remove value when clear button clicked.
  14 Jun 2023 - Fix missing hover color after ‘suggestion’ from server.
  22 Mar 2023 - Fix disappearing highlighted spaces.
  Smarter string sanitizer to allow Hebrew characters (but not <script>  for example)
  Fix RTL support, secondary text different order. Might need finetuning from native speakers.
  Fix RTL support, demo requires extra js (because of the direction switch)


Added

  23 Oct 2024 - Optional Submit on select by using data-submit-on-select attribute.
  15 Jun 2023 - Add custom event gw-page-search:selected that triggers when a suggestion is selected.
  03 Apr 2023 - Show HTML when result-key is suggestion
  31 Mar 2023 - Sync behaviour with Search Box
  24 Mar 2023 - data attribute data-min-chars to finetune the minimal characters required before requesting the endpoint.
  24 Mar 2023 - Add clear button to form.
  10 Mar 2023 - data attribute data-debounce to finetun the postpone of endpoint requests.
  PBS support
  data attribute data-noresults to translate “No results…” string.
  Accessibility: Tabindex collapsed state when viewed at 200%;
  RTL support
  Initial draft


Changed

  23 Aug 2024 - Submit on select
  05 Jul 2023 - Placeholder capitalization settable by editor.
  Minimum 2 characters needed before suggestions start getting rendered.
  Debouncing 200ms