Back to Autocomplete-guidelines

CSS ComponentThe latest version of this package is: 17.0.1, 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@17.0.1

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

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={() => 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" defaultValue="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"
      <div class="if input-wrapper autocomplete [tags] is-loading">
        โ€ฆ
      </div>
      Edit this section, Opens in new window

      Tokens

      All of the tokens can be used as preprocessor and CSS variables

      NameValueIs aliased in
      ids-autocomplete-input-spacing-inset-right-loading
      3rem
      ids-suggestions-color-background
      rgb(250, 249, 247)
      ids-suggestions-list-item-content-icon-media-query-base
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-width='3' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-miterlimit='10' stroke='%23331e11'%3E%3Cpath data-cap='butt' d='M30 30L2 2'/%3E%3Cpath stroke-linecap='square' d='M14 2H2v12'/%3E%3C/g%3E%3C/svg%3E")
      ids-suggestions-list-item-content-icon-media-query-smlr
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg stroke-width='3' fill='none' stroke='%23331e11' stroke-miterlimit='10'%3E%3Cpath data-cap='butt' data-color='color-2' d='M2 21h20a8 8 0 008-8V3'/%3E%3Cpath stroke-linecap='square' d='M10 13l-8 8 8 8'/%3E%3C/g%3E%3C/svg%3E")
      ids-suggestions-list-item-color-text
      rgb(51, 30, 17)
      ids-suggestions-list-item-color-background-normal
      rgba(0, 0, 0, 0)
      ids-suggestions-list-item-color-background-hover
      rgb(241, 236, 232)
      ids-suggestions-list-item-size-height
      2.5rem
      ids-suggestions-list-item-spacing-inset
      0.75rem 1rem
      ids-autocomplete-tags-tag-spacing-stack
      7px
      ids-autocomplete-tags-input-size-height
      2rem
      ids-autocomplete-tags-input-size-min-width
      6.5rem
      ids-autocomplete-tags-input-holder-content-icon-loading
      url('https://if-design-cdn.azureedge.net/images/documentation/loader/horizontal.svg')
      ids-autocomplete-tags-input-holder-color-background
      rgb(250, 249, 247)
      ids-autocomplete-tags-input-holder-color-text
      rgb(51, 30, 17)
      ids-autocomplete-tags-input-holder-color-border
      rgb(51, 30, 17)
      ids-autocomplete-tags-input-holder-spacing-inset
      7px 0.75rem 0
      ids-autocomplete-tags-input-holder-size-min-height
      3rem
      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.

      16.0.0 (2023-01-10)

      โš  BREAKING CHANGES

      • The input field component now has a border-radius - 6px.

      "feature 686990"

      • Merged PR 98055: feat(input-fields): style update for input fields (205b85a), closes #686990

      14.25.0 (2022-06-28)

      Features

      • autocomplete: add CSS Variables to Autocomplete (ba78ecb) , closes #599359

      Miscellaneous chores

      • autocomplete: remove dev server path for global footer, no longer required (976f7b1)

      Code Refactoring

      • autocomplete: use correct variable naming, to allow for variants (614c5d2) , closes #599359

      Documentation Updates

      • autocomplete: fix typo in documentation regarding usage of design tokens (cad7aaa)
      • autocomplete: use correct js import statement (58808fe)

      14.24.1 (2022-05-30)

      Documentation Updates

      • autocomplete: convert examples in Autocomplete Component to use MDX (eb9030f) , closes #599416

      14.22.2 (2022-05-03)

      Miscellaneous chores

      • package locks: update package locks (813eac7)

      14.20.1 (2022-04-19)

      Miscellaneous chores

      • changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
      • changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

      14.18.3 (2022-04-13)

      Bug Fixes

      • changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

      14.16.0 (2022-04-07)

      Bug Fixes

      • ๐Ÿ› Add missing imports for global CSS Variables (fbf6f06) , closes #582437

      14.9.0 (2022-03-03)

      Miscellaneous chores

      14.8.1 (2022-02-23)

      Bug Fixes

      • ๐Ÿ› Add missing imports of typography CSS variables (e716c65) , closes #559412

      reinstall (d425056)

      bootstrap (9a713df)

      merge (2b1c5f1)

      reinstall (5221600)

      reinstall (147df55)

      • use correct versions (f1b5deb)

      • Add engines for all packages (e95dfff)

      reinstall (afce1f2)

      reinstall (67f3140)

      • Add changelog.md to files (3338314)

      Reinstall (a2abf51)

      14.2.2 (2021-12-10)

      Code Refactoring

      • ๐Ÿ’ก Change focus styles, remove whatinput (75fd31b) , closes #505205

      14.2.0 (2021-12-08)

      Bug Fixes

      reinstall (885c74b)

      • fix changelogs manually (b1232b4)

      reinstall (545a069)

      reinstall (e149c2c)

      13.12.3 (2021-11-09)

      โš  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

      Documentation Updates

      • โœ๏ธ Documentation adjustments (73c09e3) , closes #467386

      • โœ๏ธ Make variations tables more condensed (4344a3a)

      • โœ๏ธ Move position of the quick links (5cb0897)

      • โœ๏ธ Remove unneeded margins for shortcuts (36c7e8d)

      • โœ๏ธ Update documentation (b1baa6d)

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

      Code Refactoring

      • ๐Ÿ’ก Categorize components (9965266) , closes #490579

      • ๐Ÿ’ก Reduce spacing tokens, use correct size tokens (97aa461)

      • ๐Ÿ’ก Rename scope and repository (3ea5423)

      • ๐Ÿ’ก Use new navigation structure for documentation (415aee5) , closes #490579

      • another change in the structure (38a0d2e)

      Miscellaneous chores

      • ๐Ÿค– Prune changelogs (2c660c2)

      • ๐Ÿค– Rename util to utils (f78721f)

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

      bootstrap (6fc1ed8)

      • fix all old references to util (d57bf17)

      • prepare for merge (0184490)

      reinstall (da80dba)

      • Rename scope and repo (257684e)

      • use correct version for utils (49e72d9)

      13.11.0 (2021-10-19)

      Features

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

      13.7.0 (2021-09-22)

      Documentation Updates

      • โœ๏ธ Update linking layout and naming (15c383b)

      Miscellaneous chores

      • ๐Ÿค– FIxing some layout issues, removing unwanted chars (0c3207f)

      13.6.3 (2021-09-17)

      Bug Fixes

      13.6.0 (2021-09-08)

      Documentation Updates

      • Use default shortcut listing for demo links (a746602)

      • ๐Ÿค– Use node v14 (4009973)

      bootstrap (d23e139)

      • ๐Ÿค– Use correct order for diff (cc6a4fd)

      12.14.1 (2021-08-12)

      Miscellaneous chores

      • ๐Ÿค– Add ci task to package.json without tests (21222e0) , closes #457627

      12.13.1 (2021-08-11)

      Bug Fixes

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

      • ๐Ÿค– Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"

      • ๐Ÿค– Reinstall (e660696)

      • ๐Ÿค– Update published date (61e7ccf)

      12.6.0 (2021-05-27)

      Features

      • ๐ŸŽธ Add no results for autocomplete (16db764) , closes #314420

      • ๐ŸŽธ Add support for no results in js lib, update docs (90a8173)

      Bug Fixes

      • ๐Ÿ› Manually set firstPublished and lastModified (e83af7d)

      • ๐Ÿ› We don't need lastModified (e458a12)

      • ๐Ÿค– Update preprocessor files (e478f86)

      12.5.0 (2021-05-25)

      Documentation Updates

      • โœ๏ธ Update documentation for supporting libs (180e161)

      12.4.1 (2021-05-21)

      Documentation Updates

      • โœ๏ธ Rename mplementation to code for autocomplete doc (7ee6d82)

      • Use correct version (f052b60)

      12.0.0 (2021-05-05)

      โš  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

      Features

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

      Bug Fixes

      • ๐Ÿ› Update references (c08f107)

      Code Refactoring

      • ๐Ÿ’ก Extract Accordion Menu as a separate component (11b1974) , closes #336508

      • ๐Ÿ’ก Extract Label to Input Label (c8bbf70) , 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

      Miscellaneous chores

      • ๐Ÿค– Convert util tokens from theo to style-dictionary (99fb4f5)

      • ๐Ÿค– Finalize breakpoint token conversion (f50ea0d)

      • ๐Ÿค– Make sure we have correct deps set, and used (5d2e0fb)

      • ๐Ÿค– Reinstall (2c763ea)

      • ๐Ÿค– Reinstall (69e1a5b)

      • ๐Ÿค– Update all design token references (c640d15)

      • ๐Ÿค– Update references to util variables (b79ec36)

      • ๐Ÿค– Updating links (70f166e)

      rebuild (7edb430)

      • Reinstall packages (3922c31)

      • update versions (f679926)

      • ๐Ÿค– Rename Change Log to Changelog (d412e63)

      • ๐Ÿค– Remove all references to sketch (35fc554) , closes #339203

      • ๐Ÿค– Update package fields (200c0af)

      10.0.0 (2021-02-15)

      โš  BREAKING CHANGES

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

      Features

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

      Code Refactoring

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

      Documentation Updates

      • โœ๏ธ Upate doc examples and docs regarding input-fields (38f6af8)

      • ๐Ÿค– Update dev and demo files. Add input-fields as peerDep (a3d46ea)

      • ๐Ÿค– Update markup for search fields (e4f4b01)

      • reinstall packages (fcfacf4)

      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)

      • ๐Ÿค– Use a more distint class name for doc crosslink links (2694867)

      7.4.1 (2020-11-17)

      Bug Fixes

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

      6.43.3 (2020-11-03)

      Miscellaneous chores

      • ๐Ÿค– Manually set version (e4d9ca6)

      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)

      • packages: remove most packages, this is a do-over (7da5b50)

      Edit this section, Opens in new window
      Contact us, Opens in new window