VUE INSTANT simple

by kabanoki

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-instant.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-clickaway.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-instant.browser.js"></script>
<div id="app">
<vue-instant 
  v-model="inputValue"
 :suggestion-attribute="suggestionAttribute"  
 :suggestions="suggestions" 
 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

Vue.component('vue-instant', VueInstant.VueInstant);  

new Vue({
  el: '#app',
  data: {
    inputValue:'',
    suggestionAttribute: 'title',
    suggestions: [
      {title: 'りんご'},
      {title: 'りんごの木'},
      {title: 'みかん'},
      {title: 'みかんの木'},
      {title: 'りんごあめ'},
      {title: 'みかんジュース'},
      {title: 'りんごジュース'},
      {title: 'みかんりんご'},
      {title: 'りんごみかん'},
    ]
  }
})