Get started with zensh-ui-autocomplete CDN
MIT licensed
Zensh-ui-autocomplete is a Vue.js component that provides an autocomplete feature for user input.
Tags:- AngularJS
- Autocomplete
- jQuery UI
Stable version
Copied!
How to start using zensh-ui-autocomplete CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zen-styles/dist/zen-styles.min.css">
<script src="https://cdn.jsdelivr.net/npm/zen-core@0.11.3/dist/zen-core.min.js"></script>
<script src="https://cdn.cdnhub.io/zensh-ui-autocomplete/0.6.1/autocomplete.min.js"></script>
<style>
#autocomplete-container {
position: absolute;
z-index: 1;
width: 100%;
max-height: 200px;
overflow-y: auto;
border: 1px solid #ccc;
border-top: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
</style>
</head>
<body>
<input type="text" id="autocomplete-input" placeholder="Type something...">
<ul id="autocomplete-container"></ul>
<script>
const input = document.getElementById('autocomplete-input');
const container = document.getElementById('autocomplete-container');
const autocomplete = new window.ZenAutocomplete(input, {
minLength: 1,
source: async (query, callback) => {
const response = await fetch('/api/autocomplete?query=' + encodeURIComponent(query));
const data = await response.json();
callback(data);
},
templates: {
suggestion: (item) => `<li><a href="${item.url}">${item.label}</a></li>`
},
onSelect: (item) => {
input.value = item.label;
container.style.display = 'none';
}
});
input.addEventListener('focus', () => {
container.style.display = 'block';
});
input.addEventListener('input', () => {
autocomplete.search();
});
</script>
</body>
</html>
Copied!
Copied!