Back to Autocomplete-guidelines

CSS ComponentThe latest version of this package is: 17.0.30-alpha.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.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-core/autocomplete@17.0.30-alpha.0
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

      Code Refactoring

      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)

      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