자동 완성보기는 어떻게 사용자 정의 할 수 있습니까? 이 같은

Question

내보기 : http://jsfiddle.net/oscar11/tm8k8907/20/

내가 입력 키워드, 디스플레이 데모처럼 정리가되면 : 나는 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에서 자동 완성 기능을 사용하려면 어떻게해야하나요? 당신이 부트 스트랩을 사용하고 있기 때문에이 데모에서 본대로 결과가 검색 아래에 표시하려는 경우, 당신은 단지 두 행을 만들 수 있습니다

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>