AutoSuggest elements
An AutoSuggestFormElement
writes a <div>
tag to the output containing all markup for an autoSuggest control.
Element and builder
The AutoSuggestFormElement
has an equivalent AutoSuggestFormElementBuilder
.
A builder can be created using BootstrapUiBuilders.autosuggest()
factory methods.
AutoSuggestFormElementConfiguration
The autoSuggest control takes in a AutoSuggestFormElementConfiguration
to configure the dataSet options
Method | Description |
---|---|
|
Configure the dataset with the given name, if it is not yet present, it will be added first. |
|
Sets the remote url endpoint where to fetch suggestions. |
|
Should the textbox show a hint for auto-completion. |
|
Highlight the matching input text in the suggestions. |
|
Minimum length the input value should have before fetching suggestiong. |
Examples
Creating an autoSuggest element
Given the following builder configuration:
BootstrapUiBuilders
.autosuggest()
.configuration(
AutoSuggestFormElementConfiguration.withDataSet(
dataSet -> dataSet.remoteUrl( "/bootstrapAutosuggest/suggest?query={{query}}" )
)
).build()
The following markup would be rendered:
<div class="axbum-typeahead" data-bootstrapui-autosuggest="{"highlight":true,"hint":true,"minLength":1,"_datasets":[{"name":"default","bloodhound":{"remote":{"url":"/bootstrapAutosuggest/suggest?query={{query}}"}}}]}">
<span class="twitter-typeahead" style="position: relative; display: inline-block;">
<input autocomplete="off" type="search" class="js-typeahead form-control tt-hint" readonly="" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);"><input autocomplete="off" type="search" class="js-typeahead form-control tt-input" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;">
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
<div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
<div class="tt-dataset tt-dataset-default"></div>
</div>
</span>
<input type="hidden" class="js-typeahead-value">
</div>