Autocomplete
An autocomplete text field is an input that offers the user text suggestions while they type.
install | yarn add @clayui/autocomplete |
---|---|
version | 3.123.0 |
Stable3.123.0View in LexiconCHANGELOG
Example
Add the class .autocomplete-dropdown-menu
to dropdown-menu
to size the Dropdown Menu according to Lexicon Design specifications.
This requires external javascript to populate and show/hide the
.dropdown-menu
.
You can use a comma to enter tags. ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.
Copied!
<div class="form-group">
<label for="autocompleteName1">Name</label>
<div class="input-group">
<div class="input-group-item">
<div class="dropdown">
<input
class="form-control"
id="autocompleteName1"
type="text"
value="Rob"
/>
<ul class="autocomplete-dropdown-menu dropdown-menu show">
<li>
<a class="dropdown-item" href="#1"
>Rob<strong>ert Downey Jr.</strong></a
>
</li>
<li>
<a class="dropdown-item" href="#1"
>Rob<strong>ert Plant</strong></a
>
</li>
<li>
<a class="dropdown-item" href="#1"
>Rob<strong>ert Baratheon</strong></a
>
</li>
<li>
<a class="dropdown-item" href="#1"
>Rob<strong>ert De Niro</strong></a
>
</li>
</ul>
</div>
<div class="form-feedback-group">
<div class="form-text">
You can use a comma to enter tags.
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.
</div>
</div>
</div>
</div>
</div>
Search Field
Copied!
<div class="form-group">
<label for="autocompleteMarketplace1">Marketplace</label>
<div class="input-group">
<div class="input-group-item">
<div class="dropdown">
<input
class="form-control input-group-inset input-group-inset-after"
id="autocompleteMarketplace1"
placeholder="Search for..."
type="text"
value="ele"
/>
<span
class="input-group-inset-item input-group-inset-item-after"
>
<button class="btn btn-unstyled" type="submit">
<svg
class="lexicon-icon lexicon-icon-search"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#search" />
</svg>
</button>
<button class="btn btn-unstyled" type="button">
<svg
class="lexicon-icon lexicon-icon-times"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#times" />
</svg>
</button>
</span>
<ul class="autocomplete-dropdown-menu dropdown-menu show">
<li>
<a class="dropdown-item" href="#1"
>ele<strong>ctric toothbrush</strong></a
>
</li>
<li>
<a class="dropdown-item" href="#1"
>ele<strong>ctric kettle</strong></a
>
</li>
<li>
<a class="dropdown-item" href="#1"
>ele<strong>ctric razor</strong></a
>
</li>
<li>
<a class="dropdown-item" href="#1"
>ele<strong>ctrodes for tents</strong></a
>
</li>
</ul>
</div>
</div>
</div>
</div>
Loading
- Loading...
Copied!
<div class="form-group">
<label for="autocompleteMarketplace2">Marketplace</label>
<div class="input-group">
<div class="input-group-item">
<div class="dropdown">
<input
class="form-control input-group-inset input-group-inset-after"
id="autocompleteMarketplace2"
type="text"
value="H"
/>
<span
class="input-group-inset-item input-group-inset-item-after"
>
<span class="inline-item inline-item-middle">
<span
class="loading-animation"
role="presentation"
></span>
</span>
</span>
<ul class="autocomplete-dropdown-menu dropdown-menu show">
<li>
<span class="disabled dropdown-item">Loading...</span>
</li>
</ul>
</div>
</div>
</div>
</div>