如何自定義自動完成視圖？

Question

我的看法是這樣的：

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

我使用vue.js

演示和完整代碼如下： http : //jsfiddle.net/oscar11/tm8k8907/20/

如果我輸入關鍵字，則顯示會變得混亂如jsfiddle中的演示

我想在下面的輸入類型搜索下自動完成：

如何使它像自動完成Google？

我仍然是CSS中的新手

Answer 1

由於使用的是引導程序，因此如果要使結果顯示在搜索下方，則可以僅創建兩行，如本演示所示： http : //jsfiddle.net/samayo/tm8k8907/22/

 new Vue({ el: '#app', data: { selected: null, 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: { select: function(state){ this.typeahead = state this.selected = state }, input: function(){ 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>