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

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 中的演示一样整洁

我想在下面的输入类型搜索下自动完成：

我怎样才能让它像谷歌自动完成？

我还是 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>