vue-instant
Version:
vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 application.
75 lines (71 loc) • 2.81 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/vue-instant@0.0.12/dist/vue-instant.css">
</head>
<body>
<div id="app">
<label>{{selectedEvent}}</label>
<vue-instant :suggestOnAllWords="true" :suggestion-attribute="suggestionAttribute" v-model="value" :disabled="false" @input="changed" @click-input="clickInput" @click-button="clickButton" @selected="selected" @enter="enter" @key-up="keyUp" @key-down="keyDown" @key-right="keyRight" @clear="clear" @escape="escape" :show-autocomplete="true" :autofocus="false" :suggestions="suggestions" name="customName" placeholder="custom placeholder" type="google"></vue-instant>
</div>
<script src="https://unpkg.com/vue@2.1.8/dist/vue.js"></script>
<script src="https://unpkg.com/vue-clickaway@2.1.0/dist/vue-clickaway.js"></script>
<script src="https://unpkg.com/vue-instant@1.0.3/dist/vue-instant.browser.js"></script>
<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
value: '',
suggestionAttribute: 'original_title',
suggestions: [],
selectedEvent: ""
},
methods: {
clickInput: function() {
this.selectedEvent = 'click input'
},
clickButton: function() {
this.selectedEvent = 'click button'
},
selected: function() {
this.selectedEvent = 'selection changed'
},
enter: function() {
this.selectedEvent = 'enter'
},
keyUp: function() {
this.selectedEvent = 'keyup pressed'
},
keyDown: function() {
this.selectedEvent = 'keyDown pressed'
},
keyRight: function() {
this.selectedEvent = 'keyRight pressed'
},
clear: function() {
this.selectedEvent = 'clear input'
},
escape: function() {
this.selectedEvent = 'escape'
},
changed: function() {
var that = this
this.suggestions = []
axios.get('https://api.themoviedb.org/3/search/movie?api_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value)
.then(function(response) {
response.data.results.forEach(function(a) {
that.suggestions.push(a)
})
})
}
},
components: {
'vue-instant': VueInstant.VueInstant
}
})
</script>
</body>
</html>