vue-simple-search-dropdown
Version:
A Vue.js simple dropdown component with search
67 lines (66 loc) • 2.21 kB
HTML
<html>
<head>
<title>Vue.js search dropdown component - example</title>
<script type="text/javascript" src="https://unpkg.com/vue@latest"></script>
<script type="text/javascript" src="https://unpkg.com/vue-simple-search-dropdown@latest/dist/vue-simple-search-dropdown.min.js"></script>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 3em;
}
h1 {
font-weight: 100;
font-size: 1.5em;
}
p {
font-size: .8em;
color: #ccc;
}
</style>
</head>
<body>
<div id="app">
<h1>Vue.js search dropdown component - example</h1>
<p>Type "Unicorn" and press enter : </p>
<Dropdown
:options="options"
v-on:selected="validateSelection"
v-on:filter="getDropdownValues"
:disabled="false"
placeholder="Please select an animal">
</Dropdown>
<p>Selected animal: {{ selected.name || 'none' }}</p>
<br />
<p>Please see documentation here: <a href="https://github.com/romainsimon/vue-simple-search-dropdown">https://github.com/romainsimon/vue-simple-search-dropdown</a></p>
</div>
<script type="text/javascript">
Vue.use(Dropdown);
new Vue({
el: '#app',
data () {
return {
options: [
{ name: 'Cat', id: 'cat' },
{ name: 'Dog', id: 'dog' },
{ name: 'Elephant', id: 'elephant' },
{ name: 'Girafe', id: 'girafe' },
{ name: 'Snake', id: 'snake' },
{ name: 'Spider', id: 'spider' },
{ name: 'Unicorn', id: 'unicorn' }
],
selected: { name: null, id: null }
}
},
methods: {
validateSelection(selection) {
this.selected = selection;
console.log(selection.name+' has been selected');
},
getDropdownValues(keyword) {
console.log('You could refresh options by querying the API with '+keyword);
}
}
});
</script>
</body>
</html>