Wie kann ich die Autocomplete-Ansicht anpassen?

Question

Meine Ansicht wie folgt aus:

<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> 

I vue.js verwenden

Demo und Voll Code wie folgt: http://jsfiddle.net/oscar11/tm8k8907/20/

Wenn ich Eingang ein Stichwort, das Display wie ein Demo aufgeräumten wird in Jsfiddle

Ich möchte Autocomplete unter Eingangstyp suchen unten:

Wie kann ich es wie Google Autocomplete machen?

Ich bin immer noch newbew in css

Answer 1

Da Sie Bootstrap verwenden, können Sie nur zwei Zeilen erstellen, wenn Sie das Ergebnis wollen unter dem Such erscheinen, wie in diesem Beispiel zu sehen: 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>