Tengo que a medida que se va ingresando el string este va filtrando los resultados y los va mostrando en un ul, el problema es que en el input tengo el evento onblur, que cuando pierde el focus el ul se oculte, esta es la razon por la que al darle click al li del ul no me deja asignarle valor al input, y no se cual sea la causa de esto, si elimino el evento onblur me deja, pero si este esta, no me deja, aqui les dejo el codigo:
js:
searchProduct: function() {
axios.post("index.php?url=get_products", {'type':this.type})
.then(response => {
this.products = response.data;
});
},
findProduct: function() {
if (this.new_name == "") {
this.filteredProducts = "";
}else{
this.filteredProducts = this.products.filter((products) => { return products.match(this.new_name.toLowerCase())});
this.showlist = true;
}
if (this.filteredProducts == "") {
this.filteredProducts[0] = "No match.";
}
},
focus: function() {
this.showlist = false;
},
hola(i) {
this.new_name = i;
},
vista:
<label class ="package_new_product_label" >New Product's name:</label>
<input class ="package_new_product_input" type="text" v-on:blur="focus" v-model="new_name" @input="findProduct" @click="findProduct">
<div id="product_ul" v-if ="showlist == true">
<ul v-if ="showlist == true">
<li v-for="i in filteredProducts" @click="hola(i)">
{{i}}
</li>
</ul>
</div>