VUE INSTANT

by kabanoki

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-instant.css">
<script src="https://unpkg.com/[email protected]/dist/vue-instant.browser.js"></script>
<div id="app">
<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="検索文字を入力" type="google"></vue-instant>
 <h3>
 suggestions:
 </h3>
 <pre>{{suggestions}}</pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-clickaway.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-instant.browser.js"></script>

CSS

pre {
  background-color: #dcdcdc;
  padding: 10px;
}

JavaScript

console.log(VueInstant)

new Vue({
        el: '#app',
        data: {
            value: '',
            suggestionAttribute: 'title',
            suggestions: [
              {title: 'りんご'},
              {title: 'りんごの木'},
              {title: 'みかん'},
              {title: 'みかんの木'},
              {title: 'りんごあめ'},
              {title: 'みかんジュース'},
              {title: 'りんごジュース'},
              {title: 'みかんりんご'},
              {title: 'りんごみかん'},
            ],
            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() {
                this.selectedEvent = 'changed'// this.suggestions = [];
            }
        },
        components: {
            'vue-instant': VueInstant.VueInstant
        }
    })