@patternfly/pfe-autocomplete v1.12.3
PatternFly Elements Autocomplete
<pfe-autocomplete>
is a Web Component that provides options in a dropdown list as user types in an input box by showing result from an api call.
Read more about Autocomplete in the PatternFly Elements Autocomplete documentation
Installation
Load <pfe-autocomplete>
via CDN:
<script src="https://unpkg.com/@patternfly/pfe-autocomplete?module"></script>
Or, if you are using NPM, install it
npm install @patternfly/pfe-autocomplete
Then once installed, import it to your application:
import '@patternfly/pfe-autocomplete';
Usage
<pfe-autocomplete debounce="500" init-value="uni">
<input placeholder="Enter Your Search Term" />
</pfe-autocomplete>
const autocomplete = document.querySelector('autocomplete');
autocomplete.autocompleteRequest = function (params, callback) {
autocomplete.loading = true;
const url = new URL('http://openlibrary.org/search.json');
url.searchParams.append('title', params.query);
fetch(url.toString())
.then(x => x.json())
.then(({ docs }) => docs.map(x => x.title))
.then(callback)
.then(() => autocomplete.loading = false);
};
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago