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

由于您使用的是bootstrap，如果您希望结果显示在搜索下方，您可以创建两行，如本演示中所示：http://jsfiddle.net/samayo/tm8k8907/22/

＆＃13;

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
      }
    }
});

＆＃13;

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

＆＃13;

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

1 个答案: