Search v0.18.0+

The Search component provides augmented markup, validation, and interaction for a native <input type="search"> element.

Basic Search

Username

<hx-search-control>
  <input
    id="demoSearch"
    type="search"
  />
  <button
    type="button"
    class="hxClear"
    aria-label="Clear search"
    hidden>
    <hx-icon type="times"></hx-icon>
  </button>
  <hx-search></hx-search>
  <label
    for="demoSearch">
    Username
  </label>
</hx-search-control>

Search Assistance

Added: v0.6.0

Search for stuff...

<hx-search-control id="assisted-search-control">
  <input
    id="assisted-search"
    type="search"
    onblur="hideAssistance()"
    onfocus="showAssistance()"
  />
  <button
    type="button"
    class="hxClear"
    aria-label="Clear Search"
    hidden
  >
    <hx-icon type="times"></hx-icon>
  </button>
  <hx-search></hx-search>
  <label for="assisted-search">
    Search for stuff...
  </label>
</hx-search-control>
<hx-search-assistance relative-to="assisted-search-control">
  <header>Search for "item"</header>
  <section>
    <header>Category Header</header>
    <button class="hxSearchSuggestion">Here is a possible <b>item</b></button>
    <button class="hxSearchSuggestion">Here is a possible <b>item</b></button>
    <button class="hxSearchSuggestion">Here is a possible <b>item</b></button>
  </section>
</hx-search-assistance>

See Also