input auto complete vue3

OTÁVIO FARIA 0
Viewed 46

I'm trying to put the ul in a responsive container underneath, could someone give me a hint?

exemple:

https://www.vuescript.com/wp-content/uploads/2017/02/Typeahead-Component-For-Vue.js-2.png

I would also like to close with click away

var app = new Vue({
  el: "#app",
    mounted(){
    console.log("test")
  },
  data(){
    return{
      search:'',
      caminhos:[
        {id:1, title:"plano individual",rotas:"www.google.com"},
        {id:2, title:"plano ",rotas:"HelloWorld.vue"},
        {id:3, title:"plano abstrato individual",rotas:"HelloWorld.vue"},
        {id:4, title:"plano terceiro individual",rotas:"HelloWorld.vue"},
        {id:5, title:"plano nada individual",rotas:"HelloWorld.vue"},
      ]   
    }
  },
  computed: {

    filteredItems() {
      if (this.search.length >= 3){
        console.log(this.caminhos)
        return this.caminhos.filter(item => {
        return item.title.toLowerCase().indexOf(this.search.toLowerCase()) > -1
         
        })
      }else{
        return null
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <input
        type="search"
        class="form-control"
        placeholder="Type query"
        aria-label="Search"
        v-model="search"
        
      />
      <ul v-for="obj in filteredItems"
          v-bind:key="obj.id"
          class="list-group">
        <li ><a v-bind:href="obj.rotas">{{obj.title}}</a></li>
      </ul>
</div>

vuejs2 vuejs3 vue.js javascript html
1 Answers

A simple way to do close on blur is to add a flag indicating the visibility state, and change the flag base on weather you are focused on the input element or not.

If you really have to use ul keep in mind that it has some default styling that might not be desired.

var app = new Vue({
  el: "#app",
    mounted(){
  },
  data(){
    return{
      show: false,
      search:'',
      caminhos:[
        {id:1, title:"plano individual",rotas:"www.google.com"},
        {id:2, title:"plano ",rotas:"HelloWorld.vue"},
        {id:3, title:"plano abstrato individual",rotas:"HelloWorld.vue"},
        {id:4, title:"plano terceiro individual",rotas:"HelloWorld.vue"},
        {id:5, title:"plano nada individual",rotas:"HelloWorld.vue"},
      ]   
    }
  },
  computed: {

    filteredItems() {
      if (this.search.length >= 3){
        return this.caminhos.filter(item => {
        return item.title.toLowerCase().indexOf(this.search.toLowerCase()) > -1
         
        })
      }else{
        return null
      }
    }
  }
})
<style>
.dropdown {
  position: relative;
  width: 300px;
}

.dropdown input {
  width: 100%;
}

.dropdown .list-group {
  position: absolute;
  left:0;
  right:0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=app>
  <div class="dropdown">
    <input @focus="show = true" @blur="show = false" type="search" class="form-control" placeholder="Type query"
      aria-label="Search" v-model="search" />
    <template v-if="show">
      <ul class="list-group">
        <li v-for="obj in filteredItems" v-bind:key="obj.id"><a v-bind:href="obj.rotas">{{obj.title}}</a></li>
      </ul>
    </template>
  </div>
</div>

user47297880
Related