Installation

Install the Search keyword package from npm

npm install @royallondon/design-system-component-search-keyword

Import the required CSS file

@import '@royallondon/design-system-component-search-keyword/dist/search-keyword';

Add the html code for the search keyword component

<form method="" class="rl-c-search--ice">
  <label class="rl-u__visuallyhidden" for="search-input">Search</label>
  <input
    type="text"
    class="rl-c-search__input rl--bg-color-white"
    id="search-input"
    aria-describedby="search-input"
    placeholder="Search Royal London"
  />
  <button type="submit" class="rl-c-search__submit">
    <svg class="rl-f-icon rl-f-icon--md rl-f-icon--primary">
      <title>Search</title>
      <use href="/assets/icons.svg#search"></use>
    </svg>
  </button>
</form>

Import the js for the component, json data to be used for the search results and initialise the new searchBar class

import SearchBar from '@royallondon/design-system-component-search-keyword/dist/search-keyword.js';
import data from 'PathToJsonFile.json';

document.addEventListener('DOMContentLoaded', () => {
  new SearchBar(data);
});

1. You can pass in the following options to searchBar js class

document.addEventListener('DOMContentLoaded', () => {
  const searchBar = new SearchBar(searchData, {
    formSelector: '#my-search-form',
    inputSelector: '#my-search-input',
    submitButtonSelector: '#my-search-submit',
    minCharacters: 2, // Set to 2 if you want search to start after 2 characters are typed
  });
});

Support

Issues and questions are handled through the Royal London Design System support page.

Licence

@royallondon/design-system-component-search-keyword

This package is published primarily for use in Royal London products. It is made available publicly so that partners and suppliers building Royal London experiences can consume it directly.

Use of this package is subject to the Royal London Authorised Use Licence. See the LICENSE.md file included in this package.

The Search keyword component for the Royal London Design System. For design guidance, examples and accessibility notes, see the Search keyword page.

Release log

| Version | Release notes | | ------- | --------------------------------------------------------------------------------------------------------------------------------- | | 2.3.0 | Prepare for public npm release: add licence, publish dist only (src removed), remove source maps; add TypeScript declarations | | 2.2.5 | Move to new feed | | 2.2.4 | Update border for compatibility with Forms 2.x and 3.x | | 2.2.0 | Apply new icons and latest tokens added to foundations | | 2.1.1 | Add custom font weight to search result titles | | 2.1.0 | Update search keyword to use type tokens | | 2.0.1 | Fix for width not collapsing on small screens | | 2.0.0 | Upgrade for compatibility with foundations v2 | | 1.1.0 | Fixes for screen reader announcing results | | 1.0.0 | First release of search keyword component |