Get started with awesomplete CDN
MIT licensed
Awesomplete is a small, fast, and customizable autocomplete library for web applications.
Tags:- autocomplete
- lightweight
Stable version
Copied!
How to start using awesomplete CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.15/awesomplete.css">
<script src="https://cdn.cdnhub.io/awesomplete/1.1.5/awesomplete.min.js"></script>
<style>
#mylist {
position: absolute;
width: 200px;
z-index: 1;
}
</style>
</head>
<body>
<input type="text" id="myinput" list="mylist">
<datalist id="mylist">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
<option value="Durian">
</datalist>
<ul id="mylist-container"></ul>
<script>
const input = document.querySelector('#myinput');
const listContainer = document.querySelector('#mylist-container');
const list = new Awesomplete({
list: listContainer,
minChars: 1,
maxItems: 10,
filter: function (term, item) {
return item.text.toLowerCase().indexOf(term.toLowerCase()) > -1;
},
template: Awesomplete.tpls.default.replace(/<b>/g, '<strong>').replace(/<\/b>/g, '</strong>')
});
input.addEventListener('input', () => {
list.value = input.value;
});
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!