How can I customize autocomplete view?

Question

My view like this :

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

I use vue.js

Demo and full code like this : http://jsfiddle.net/oscar11/tm8k8907/20/

If I input a keyword, the display becomes uncluttered like a demo in jsfiddle

I want autocomplete under input type search below :

How can I make it like autocomplete google?

I'm still newbew in css

Answer 1

Since you are using bootstrap, you can just create two rows if you want the result to appear below the search as seen in this demo: 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>