オートコンプリートビューをカスタマイズするにはどうすればよいですか？このような

Question

マイビュー： http://jsfiddle.net/oscar11/tm8k8907/20/

はI入力キーワードが、ディスプレイはデモのように整理整頓されなくなった場合：私はvue.js

このような

デモと完全なコードを使用し

<div class="form-group"> 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Search" name="q" autofocus v-model="typeahead" @input="input"> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="submit" ref="submitButton"><span class="fa fa-search"></span></button> 
     </span> 
     <ul v-if="!selected && typeahead"> 
      <li v-for="state in filteredStates" @click="select(state)">{{ state }}</li> 
     </ul> 
    </div> 
</div> 

jsfiddle

以下の入力タイプ検索でオートコンプリートしたい：

私はオートコンプリートgoogleのようにすることはできますか？あなたは、ブートストラップを使用しているので、このデモに見られるように、あなたは結果が検索の下に表示させたい場合は、あなただけの2つの行を作成することができます

Answer 1

は、私はまだCSSのnewbewだ：http://jsfiddle.net/samayo/tm8k8907/22/

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    \t selected: null, 
 
    \t typeahead: null, 
 
     states: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 
 
    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 
 
    'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 
 
    'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 
 
    'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 
 
    'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 
 
    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 
 
    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 
 
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'] 
 
    }, 
 
    computed:{ 
 
     filteredStates(){ 
 
     return this.states.filter(s => s.toLowerCase().includes(this.typeahead.toLowerCase())) 
 
     } 
 
    }, 
 
    
 
    methods: { 
 
    \t select: function(state){ 
 
     \t this.typeahead = state 
 
     this.selected = state 
 
     }, 
 
     
 
     input: function(){ 
 
     \t this.selected = null 
 
     } 
 
    } 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div id="app"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <div class="form-group"> 
 
     <div class="input-group"> 
 
     <input type="text" class="form-control" placeholder="Search" name="q" autofocus v-model="typeahead" @input="input"> 
 
     <span class="input-group-btn"> 
 
       <button class="btn btn-default" type="submit" ref="submitButton"><span class="fa fa-search"></span></button> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <ul v-if="!selected && typeahead"> 
 
     <li v-for="state in filteredStates" @click="select(state)">{{ state }}</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>