JSFiddle - React, Tailwind, and code Playground

by Muzaffar Rasulov

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <input type="text" autocomplete="off" v-model="state" @input="filterStates" @focus="modal=true" @blur="modal=false"/>
  <div v-if="filterStates && modal">
    <ul>
      <li v-for="filteredState in filteredStates" @click="setState(filteredState)">
        {{filteredState}}
      </li>
    </ul>
  </div>
</div>

JavaScript

new Vue({
    el: '#app',
        data: {
            state: '',
            modal: false,
            states: [
                'qwe', 'asd', 'zxc'
            ],
            filteredStates: []
       },
        methods: {
            filterStates() {
                if (this.state.length === 0) {
                    // this.filteredStates = this.states
                    this.modal = false
                } else this.modal = true

                this.filteredStates = this.states.filter(state => {
                    return state.toLowerCase().startsWith(this.state.toLowerCase())
                })
            },
            setState(state) {
                this.state = state
                this.modal = false
            }
        }
    }
})