如何自定义自动完成视图？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何自定义自动完成视图？相关的知识，希望对你有一定的参考价值。
我的观点是这样的：
<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中的demo一样整洁
我想在下面的输入类型搜索下自动完成：
我怎样才能像自动完成谷歌一样？
我仍然是新的css
答案
由于您使用的是bootstrap，如果您希望结果显示在搜索下方，您可以创建两行，如本演示中所示：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>以上是关于如何自定义自动完成视图？的主要内容，如果未能解决你的问题，请参考以下文章