Variable Keyword Search
<terra-variable-keyword-search> | TerraVariableKeywordSearch
Fuzzy-search for dataset keywords in combobox with list autocomplete.
<terra-variable-keyword-search></terra-variable-keyword-search>
Examples
First Example
TODO
Second Example
TODO
[component-metadata:terra-variable-keyword-search]
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/variable-keyword-search/variable-keyword-search.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/variable-keyword-search/variable-keyword-search.js';
To import this component using a bundler:
import '@nasa-terra/components/dist/components/variable-keyword-search/variable-keyword-search.js';
To import this component as a React component:
import TerraVariableKeywordSearch from '@nasa-terra/components/dist/react/variable-keyword-search';
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
label
|
Label the combobox with this. |
string
|
'Enter search terms (e.g., precipitation, AOD)'
|
|
placeholder
|
Set a placeholder for the combobox with this. Defaults to the label’s value. |
string
|
- | |
hideLabel
hide-label
|
Hide the combobox’s label text. When hidden, still presents to screen readers. |
boolean
|
true
|
|
searchConfig
|
type can be Boolean, String, Number, Object,
or Array
|
object
|
{ //* @see {@link https://www.fusejs.io/api/options.html#options} keys: ['id'],
useExtendedSearch: true, }
|
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
terra-variable-keyword-search-change
|
onTerraVariableKeywordSearchChange
|
Emitted when an option is selected. | - |
terra-search
|
onTerraSearch
|
Emitted when the component is triggering a search (like a form triggering submit). | - |
Learn more about events.
Custom Properties
| Name | Description | Default |
|---|---|---|
--host-height
|
The height of the host element. | |
--label-height
|
The height of the input’s label element. |
Learn more about customizing CSS custom properties.
Parts
| Name | Description |
|---|---|
base
|
A search element, the component’s base. |
combobox
|
An input element used for searching. |
button
|
A button used for toggling the listbox’s visibility. |
listbox
|
A ul that holds the clickable options. |
Learn more about customizing CSS parts.