Back to Autocomplete-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

Autocompletes allow users to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted), and receive one or more suggested matches in a list below the input.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/autocomplete@14.1.0

Table of Contents

Edit this section, Opens in new window

Usage

Required markup

String

Here is the default autocomplete string html code. Code for the suggestion elements follows below.

Tips: start searching: "how do i.."
  1. how do I convert to pdf
  2. how do I convert to muslim
  3. how do I convert to judaism
  4. how do I convert to christianity
  5. how do I convert to catholic
  6. how do I convert to mp3
<form class="if" action="none" onsubmit="javascript: return false;">
  <div class="if input-wrapper autocomplete">
    <input
      type="search"
      class="if input-field"
      name="search"
      placeholder="Enter your search"
      aria-expanded="false"
      aria-owns="autocomplete-string-index-1"
      aria-autocomplete="list"
      autocomplete="off"
      role="combobox"
    />
    <label for="search" class="if">
      Search
    </label>
    <div class="if input-help">
      Tips: start typing: "how do i.."
    </div>
    <ol id="autocomplete-suggestions-1" role="listbox" class="if suggestions"></ol>
  </div>
</form>

Suggestion element:

<li
  data-rel="how do I convert to pdf"
  role="option"
  aria-setsize="6"
  aria-posinset="1"
  tabindex="-1"
  aria-selected="false|true"
  class="if [is-selected]"
>
  <span class="if"><mark class="if">how do I convert to </mark>pdf</span>
</li>

Tags

    Create tags by typing and use comma , or Enter to add them
    1. immovableness
    2. imbrium
    Create tags by typing and use comma , or Enter to add them

    The html implementation for suggestions are the same as for string. They key difference is in the input layout:

    2,14c2,5
    -   <div class="if input-wrapper autocomplete">
    -     <input
    -       type="text"
    -       class="if input-field"
    -       name="autocomplete-1"
    -       aria-expanded="false"
    -       aria-owns="some-id"
    -       aria-autocomplete="list"
    -       autocomplete="off"
    -       role="combobox"
    -     />
    -     <label for="autocomplete-1" class="if">
    -       Search
    ---
    +   <div class="if input-wrapper autocomplete tags">
    +     <input type="text" class="if input-field tag-holder" value="Orwell, 1984" name="tags" />
    +     <label for="tags" class="if">
    +       Choose tags
    16c7,24
    -     <div class="if input-help">
    ---
    +     <div class="if autocomplete-tags-input-holder">
    +       <ol id="some-id" role="listbox" class="if suggestions"></ol>
    +       <button type="button" data-rel="Orwell" aria-label="Remove Orwell" class="if tag input">
    +         Orwell
    +       </button>
    +       <button type="button" data-rel="1984" aria-label="Remove 1984" class="if tag input">
    +         1984
    +       </button>
    +       <input
    +         type="text"
    +         class="if input-field"
    +         name="autocomplete-1"
    +         aria-expanded="false"
    +         aria-owns="some-id"
    +         aria-autocomplete="list"
    +         autocomplete="off"
    +         role="combobox"
    +       />
    18c26,27
    -     <ol id="some-id" role="listbox" class="if suggestions"></ol>
    ---
    +     <span class="if input-help">
    +     </span>
    <form class="if" action="none" onsubmit="javascript: return false;">
      <div class="if input-wrapper autocomplete tags">
        <input type="text" class="if input-field tag-holder" value="Orwell, 1984" name="tags" />
        <label for="tags" class="if">
          Choose tags
        </label>
        <div class="if autocomplete-tags-input-holder">
          <ol id="some-id" role="listbox" class="if suggestions"></ol>
          <button type="button" data-rel="Orwell" aria-label="Remove Orwell" class="if tag input">
            Orwell
          </button>
          <button type="button" data-rel="1984" aria-label="Remove 1984" class="if tag input">
            1984
          </button>
          <input
            type="text"
            class="if input-field"
            name="autocomplete-1"
            aria-expanded="false"
            aria-owns="some-id"
            aria-autocomplete="list"
            autocomplete="off"
            role="combobox"
          />
        </div>
        <span class="if input-help"> </span>
      </div>
    </form>
    Key changes
    1. The main input field used for forms is hidden and is populated with the tags added or pre-added
    2. This element is styled like an input field
    3. Added or pre-added tags are here
    Edit this section, Opens in new window

    Modifiers

    Loading state

    Tips: start searching: "Bar"
    Loading
    <div class="if input-wrapper autocomplete [tags] is-loading">
      โ€ฆ
    </div>
    Edit this section, Opens in new window

    Changelog

    Change Log

    All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

    14.0.0 (2021-11-09)

    chore

    • ๐Ÿค– Rename util to utils (f78721f)
    • ๐Ÿค– Separate out CSS docs, split js into @ids-js/autocomplete (6475a78), closes #467386

    Code Refactoring

    • ๐Ÿ’ก Rename scope and repository (3ea5423)
    • ๐Ÿ’ก Use new navigation structure for documentation (415aee5), closes #490579

    Documentation

    • โœ๏ธ Update links and change navigation structure (0bfd27d), closes #490579

    BREAKING CHANGES

    • ๐Ÿงจ The scope for If Design System npm packages has now changed from

    @if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

    • ๐Ÿงจ Util is now renamed to Utils
    • ๐Ÿงจ We have now changed the navigation structure for the documentation site.

    Please update any saved links!

    • ๐Ÿงจ Navigation structure has now changed. Please see release notes!
    • ๐Ÿงจ Autocomplete JS is moved to @ids-js/autocomplete

    13.11.0 (2021-10-19)

    Features

    • ๐ŸŽธ Input field hot reload (eac76b7)

    13.6.3 (2021-09-17)

    Bug Fixes

    12.13.1 (2021-08-11)

    Bug Fixes

    • ๐Ÿ› Whitelist docs dir for npm packaging (1a5cfd0), closes #457621

    12.6.0 (2021-05-27)

    Bug Fixes

    • ๐Ÿ› Manually set firstPublished and lastModified (e83af7d)
    • ๐Ÿ› We don't need lastModified (e458a12)

    Features

    • ๐ŸŽธ Add no results for autocomplete (16db764), closes #314420
    • ๐ŸŽธ Add support for no results in js lib, update docs (90a8173)

    12.0.0 (2021-05-05)

    Bug Fixes

    • ๐Ÿ› Update references (c08f107)

    Code Refactoring

    • ๐Ÿ’ก Extract Accordion Menu as a separate component (11b1974), closes #336508
    • ๐Ÿ’ก Rename and consolidate mixins (67cf470), closes #268081
    • ๐Ÿ’ก Rename crosslink buttons to Shortcuts (c05bf9c), closes #336508
    • ๐Ÿ’ก Rename Footer to Global Footer (7cb7239), closes #336508

    Features

    • ๐ŸŽธ Rename and extract and update hero with no image to (384eb77), closes #336508

    BREAKING CHANGES

    • ๐Ÿงจ All of the mixins have now been renamed
    • ๐Ÿงจ The Accordion Menu is now a separate component
    • ๐Ÿงจ This extracts the Hero variation with no image into a separate, design

    updated component named Header

    • ๐Ÿงจ Footer is now renamed to Global Footer
    • ๐Ÿงจ Crosslinks have seized to exist. They are all extracted into separate

    components. This commit converts crosslink buttons into the new component Shortcuts

    10.0.0 (2021-02-15)

    Code Refactoring

    • ๐Ÿ’ก Rename form-group to input-wrapper (7ee3bae)

    Features

    • ๐ŸŽธ Add box-shadow to suggestion box for autocomplete (684e177)

    BREAKING CHANGES

    • ๐Ÿงจ form-group is now renamed to input-wrapper, a more logical name

    8.2.1 (2021-01-13)

    Bug Fixes

    12.13.1 (2021-08-11)

    Bug Fixes

    • ๐Ÿ› Whitelist docs dir for npm packaging (1a5cfd0), closes #457621

    12.6.0 (2021-05-27)

    Bug Fixes

    • ๐Ÿ› Manually set firstPublished and lastModified (e83af7d)
    • ๐Ÿ› We don't need lastModified (e458a12)

    Features

    • ๐ŸŽธ Add no results for autocomplete (16db764), closes #314420
    • ๐ŸŽธ Add support for no results in js lib, update docs (90a8173)

    12.0.0 (2021-05-05)

    Bug Fixes

    • ๐Ÿ› Update references (c08f107)

    Code Refactoring

    • ๐Ÿ’ก Extract Accordion Menu as a separate component (11b1974), closes #336508
    • ๐Ÿ’ก Rename and consolidate mixins (67cf470), closes #268081
    • ๐Ÿ’ก Rename crosslink buttons to Shortcuts (c05bf9c), closes #336508
    • ๐Ÿ’ก Rename Footer to Global Footer (7cb7239), closes #336508

    Features

    • ๐ŸŽธ Rename and extract and update hero with no image to (384eb77), closes #336508

    BREAKING CHANGES

    • ๐Ÿงจ All of the mixins have now been renamed
    • ๐Ÿงจ The Accordion Menu is now a separate component
    • ๐Ÿงจ This extracts the Hero variation with no image into a separate, design

    updated component named Header

    • ๐Ÿงจ Footer is now renamed to Global Footer
    • ๐Ÿงจ Crosslinks have seized to exist. They are all extracted into separate

    components. This commit converts crosslink buttons into the new component Shortcuts

    10.0.0 (2021-02-15)

    Code Refactoring

    • ๐Ÿ’ก Rename form-group to input-wrapper (7ee3bae)

    Features

    • ๐ŸŽธ Add box-shadow to suggestion box for autocomplete (684e177)

    BREAKING CHANGES

    • ๐Ÿงจ form-group is now renamed to input-wrapper, a more logical name

    8.2.1 (2021-01-13)

    Bug Fixes

    12.13.1 (2021-08-11)

    Bug Fixes

    • ๐Ÿ› Whitelist docs dir for npm packaging (1a5cfd0), closes #457621

    12.6.0 (2021-05-27)

    Bug Fixes

    • ๐Ÿ› Manually set firstPublished and lastModified (e83af7d)
    • ๐Ÿ› We don't need lastModified (e458a12)

    Features

    • ๐ŸŽธ Add no results for autocomplete (16db764), closes #314420
    • ๐ŸŽธ Add support for no results in js lib, update docs (90a8173)

    12.0.0 (2021-05-05)

    Bug Fixes

    • ๐Ÿ› Update references (c08f107)

    Code Refactoring

    • ๐Ÿ’ก Extract Accordion Menu as a separate component (11b1974), closes #336508
    • ๐Ÿ’ก Rename and consolidate mixins (67cf470), closes #268081
    • ๐Ÿ’ก Rename crosslink buttons to Shortcuts (c05bf9c), closes #336508
    • ๐Ÿ’ก Rename Footer to Global Footer (7cb7239), closes #336508

    Features

    • ๐ŸŽธ Rename and extract and update hero with no image to (384eb77), closes #336508

    BREAKING CHANGES

    • ๐Ÿงจ All of the mixins have now been renamed
    • ๐Ÿงจ The Accordion Menu is now a separate component
    • ๐Ÿงจ This extracts the Hero variation with no image into a separate, design

    updated component named Header

    • ๐Ÿงจ Footer is now renamed to Global Footer
    • ๐Ÿงจ Crosslinks have seized to exist. They are all extracted into separate

    components. This commit converts crosslink buttons into the new component Shortcuts

    10.0.0 (2021-02-15)

    Code Refactoring

    • ๐Ÿ’ก Rename form-group to input-wrapper (7ee3bae)

    Features

    • ๐ŸŽธ Add box-shadow to suggestion box for autocomplete (684e177)

    BREAKING CHANGES

    • ๐Ÿงจ form-group is now renamed to input-wrapper, a more logical name

    8.2.1 (2021-01-13)

    Bug Fixes

    • ๐Ÿ› Fix javascript for keyboard navigation for autocomplete (bd3d9f6), closes #317936

    7.8.0 (2020-11-30)

    Bug Fixes

    • ๐Ÿ› Use scoped kbd tags (89dd3f6)

    7.4.1 (2020-11-17)

    Bug Fixes

    • ๐Ÿ› Make sure we have the correct build scripts (1f3aa24), closes #313888

    6.42.0 (2020-10-22)

    Bug Fixes

    • ๐Ÿ› Populate demo file for autocomplete correctly (3e7c46a)

    6.41.0 (2020-10-21)

    Features

    • ๐ŸŽธ Add new component autocomplete (ea22002)
    Edit this section, Opens in new window
    Contact us, Opens in new window