Get started with completer CDN
MIT licensed
Completer.js: Minimal library for managing, chaining, and handling JS promises.
Tags:- auto
- complete
- jquery
- plugin
- html
- css
- javacript
- front-end
- web
- development
Stable version
Copied!
How to start using completer CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with completer CDN - cdnhub.io</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/completer.min.js"></script>
</head>
<body>
<input type="text" id="autocomplete-input" class="autocomplete" autocomplete="off">
<ul id="autocomplete-list"></ul>
<script>
const input = document.getElementById('autocomplete-input');
const list = document.getElementById('autocomplete-list');
const suggestions = [
'Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry', 'Fig', 'Grape', 'Honeydew', 'Ice Cream', 'Jackfruit', 'Kiwi', 'Lemon', 'Mango', 'Nectarine', 'Orange', 'Pineapple', 'Quince', 'Raspberry', 'Strawberry', 'Tangerine', 'Ugli Fruit', 'Vanilla', 'Watermelon', 'Xigua', 'Yellow Watermelon', 'Zucchini'
];
const completable = new Completer('input', { suggestions });
completable.on('select', (e) => {
input.value = e.item;
list.style.display = 'none';
});
input.addEventListener('input', () => {
list.style.display = 'block';
const filtered = suggestions.filter((suggestion) => suggestion.toLowerCase().startsWith(input.value.toLowerCase()));
completable.update(filtered);
});
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!