@clayui/autocomplete
Advanced tools
import { AutocompleteWithLoadingState, AutocompleteWithDataProvider, } from '$packages/clay-autocomplete/docs/index';
Autocomplete provides the necessary components for you to compose with the other components, by itself it does not do much, you need to use the <ClayDropDown /> along with <Autocomplete.DropDown /> and <Autocomplete.Item /> to create the suggestions.
<ClayAutocomplete.DropDown>
<ClayDropDown.ItemList>
<ClayAutocomplete.Item match="cl" value="clay" />
</ClayDropDown.ItemList>
</ClayAutocomplete.DropDown>
If you already have the raw data, it is becomes simpler to create an autocomplete but it is important that you create a filter for your data according to the value entered in the input element.
<ClayAutocomplete>
<ClayAutocomplete.Input
onChange={(event) => setValue(event.target.value)}
value={value}
/>
<ClayAutocomplete.DropDown active={showDropDown}>
<ClayDropDown.ItemList>
{resourceFiltered.map((item) => (
<ClayAutocomplete.Item key={item} match={value} value={item} />
))}
</ClayDropDown.ItemList>
</ClayAutocomplete.DropDown>
</ClayAutocomplete>
<ClayAutocomplete.LoadingIndicator /> is used for providing feedback that data is loading in the suggestion box, it communicates with <ClayAutocomplete.Input /> so that the markup can adjust.
For cases where you do not have all the data in the client and need to pass the value for the filter to the backend, use the <ClayDataProvider /> component or useResource hook for this.
3.37.0 (2021-10-06)
$alert-*-btn variant Sass maps to use newer keys (ecdd38a)clay-alert-variant mixin to generate alert variant styles (9be70d7)alert-inline should have more space between text and top / bottom borders (29c4764)$alert-font-size to 0.875rem and change $alert-indicator-font-size to 1rem (21d33ed)sticker-light and sticker-dark (adcd19f)$alert-*-btn variant Sass maps to use newer keys and update $cadmin-alert-palette to use $alert-* variant Sass maps (6a4a100)clay-alert-variant mixin to generate alert variant styles (3410faf).form-feedback-group, .form-feedback-item,.form-feedback-indicator, and .form-text (db26016), closes #4298fieldset[disabled] .form-control should use values from the $cadmin-input Sass map and move rule-set closer to the .form-control rule-set (0504ff2)label.disabled should use properties declared in $cadmin-input-label map and move the label.disabled rule-set closer to the label rule-set (d00b97b)url("data:image/svg+xml,<svg></svg>") to use clay-svg-url (c1cd8a2)clay-form-control-variant to style Danger, Warning, Success readonly inputs instead of clay-button-variant (23ed8cb)fieldset[disabled] .form-control should use values from the $input Sass map and move rule-set closer to the .form-control rule-set (9ffc635)label.disabled should use properties declared in $input-label map and move the label.disabled rule-set closer to the label rule-set (0ea7c72)math-sign should return a negative calc value if a CSS custom property is passed in (e824c5d)escape-svg function (e8ffa5d)$enable-hover-media-query, $caret-width, $caret-vertical-align, $caret-spacing, $emphasized-link-hover-darken-percentage (54d39f9)$escaped-characters variable (9b93ca0)math-sign function (835a62a)clay-alert-variant mixin and deprecate Bootstrap's alert-variant mixin (a3f1722)treeview-dropping-bottom, treeview-dropping-inside and treeview-dropping-top (f0b4c5e).alert-inline, alert-autofit-stacked, alert-autofit-stacked-sm-down, alert-autofit-stacked-xs-down, alert-indicator-start (7738e78).alert-inline, alert-autofit-stacked, alert-autofit-stacked-sm-down, alert-autofit-stacked-xs-down, alert-indicator-start (b60b0c7)$cadmin-input-danger, $cadmin-input-warning, $cadmin-input-success, $cadmin-input-danger-select, $cadmin-input-warning-select, $cadmin-input-success-select Sass maps with clay-form-control-variant and clay-select-variant for more customization options (df1e426)$input-danger, $input-warning, $input-success, $input-danger-select, $input-warning-select, $input-success-select Sass maps with clay-form-control-variant and clay-select-variant for more customization options (c23c8f5)sticker-light now has a light font color and sticker-dark has a dark font color. All instances of sticker-light should be updated to use sticker-dark and all instances of sticker-dark should be updated to use sticker-light. If you do not want to make this change in your markup, you can revert back to the original styles with:$sticker-light-bg: $dark !default;
$sticker-light-color: $white !default;
$sticker-dark-bg: $dark !default;
$sticker-dark-color: $white !default;
See issue https://github.com/liferay/clay/issues/4310 for more context.
FAQs
ClayAutocomplete component
We found that @clayui/autocomplete demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.