CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, 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.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
Required markup
String
Here is the default autocomplete string html code. Code for the suggestion elements follows below.
<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
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>
- The main input field used for forms is hidden and is populated with the tags added or pre-added
- This element is styled like an input field
- Added or pre-added tags are here
Modifiers
Loading state
<div class="if input-wrapper autocomplete [tags] is-loading">
…
</div>
Tokens
Name | Value | Is 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://static.design.if.eu/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 |
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"
14.25.0 (2022-06-28)
Features
Miscellaneous chores
- autocomplete: remove dev server path for global footer, no longer required (976f7b1)
Code Refactoring
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
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
14.9.0 (2022-03-03)
Miscellaneous chores
- 🤖 Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
reinstall (afce1f2)
reinstall (67f3140)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
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 fromif-design-system
toids-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
-
✏️ 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
-
💡 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)
reinstall (da80dba)
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
bootstrap (d23e139)
- 🤖 Use correct order for diff (cc6a4fd)
12.14.1 (2021-08-12)
Miscellaneous chores
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
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
Bug Fixes
- 🐛 Update references (c08f107)
Code Refactoring
-
💡 Extract Accordion Menu as a separate component (11b1974) , closes #336508
-
💡 Rename crosslink buttons to Shortcuts (c05bf9c) , 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
7.8.0 (2020-11-30)
Bug Fixes
7.4.1 (2020-11-17)
Bug Fixes
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)