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

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

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

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

我仍然是新的css

Answer 1

由于您使用的是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>