How can i use this in the browser?
usamamashkoor opened this issue · comments
Hi, can anyone let me know how can I use this inside the browser directly using script tags
<script src=""></script>
Thanks
You can copy it from an npm cdn to host yourself or import it from a cdn directly:
Here's a codesandbox serving from unpkg:
https://codesandbox.io/s/vue-autosuggest-static-v8x25?file=/index.html:0-1989
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-autosuggest@latest/dist/vue-autosuggest.js"></script>
</head>
<body>
<div id="app">
<pre v-if="selected">You have selected: '{{selected}}'</pre>
<vue-autosuggest
:suggestions="filteredOptions"
:limit="10"
:input-props="inputProps"
@input="onInputChange"
@selected="onSelected"
></vue-autosuggest>
</div>
</body>
<script>
new Vue({
data() {
return {
selected: "",
options: [
{
data: [
"Frodo",
"Samwise",
"Gandalf",
"Galadriel",
"Faramir",
"Éowyn",
"Peregrine Took",
"Boromir",
"Legolas",
"Gimli",
"Gollum",
"Beren",
"Saruman",
"Sauron",
"Théoden"
]
}
],
filteredOptions: [],
inputProps: {
id: "autosuggest__input",
placeholder: "Type 'e'"
},
limit: 10
};
},
methods: {
onSelected(option) {
this.selected = option.item;
},
onInputChange(text) {
/* Full control over filtering. Maybe fetch from API?! Up to you!!! */
const filteredData = this.options[0].data
.filter(item => {
return item.toLowerCase().indexOf(text.toLowerCase()) > -1;
})
.slice(0, this.limit);
this.filteredOptions = [
{
data: filteredData
}
];
}
}
}).$mount("#app");
</script>
</html>@darrenjennings Thank you so much for sharing this.