如何自定义自动完成视图？

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>