Skip to content

Instantly share code, notes, and snippets.

@hawkapparel

hawkapparel/vueautocomplete.vue

Created July 25, 2020 03:02
Show Gist options
  • Save hawkapparel/535915e009aa7dba13d3b2483a2bab58 to your computer and use it in GitHub Desktop.
Save hawkapparel/535915e009aa7dba13d3b2483a2bab58 to your computer and use it in GitHub Desktop.
Download ZIP
Autocomplete Vuejs + Nuxt + Advanced properties
Raw
vueautocomplete.vue
<template>
<nav class="navbar-navigate bg-white">
<div class="navbar container">
<button id="btn-menu-burguer" class="btn-sandwich btn-icon-menu-mobile btn bg-white" @click.prevent="openMenuCategories">
<!-- <i class="icon-menu iconout material-icons d-block">menu</i> -->
<span></span>
<span></span>
<span></span>
</button>
<!-- <div class="d-md-none">
<i class="iconout material-icons">menu</i>
</div> -->
<div class="logo-block">
<nuxt-link class="navbar-brand p-0 m-0" to="/">
<!-- <img src="../../assets/img/logoMelamundo.png" width="140px" height="" alt="melamundo"> -->
<img :src="URL_IMG_API + 'melamundo/site/' + 'logoMelamundo.png'" width="140px" height="" alt="melamundo">
</nuxt-link>
</div>
<div class="search-block">
<div class="search-block-container">
<div class="btn-sandwich-content">
<button id="btn-menu-burguer-search" class="btn btn-sandwich btn-open-menu" @click.prevent="openMenuCategories">
<span></span>
<span></span>
<span></span>
</button>
</div>
<client-only placeholder="">
<v-autocomplete class="ipt-search"
:class="activeSearch"
:items="items"
:v-model="item"
:get-label="getLabel"
@update-items="updateItems"
@item-clicked="selectItem"
:min-len='0'
:input-attrs="{placeholder:'Encuentra todo lo que buscas', autofocus:'autofocus', value:''}"
:component-item='template' :keep-open="true" >
</v-autocomplete>
</client-only>
<input type="text" class="ipt-search-load" placeholder="Encuentra todo lo que buscas" :class="loading ? 'is-load' : ''">
<button class="find-button" @click.prevent="goToProductLink">
<i class="icon-search material-icons">search</i>
</button>
</div>
</div>
<div class="icons-block">
<button class="nuxticon bg-white" @click.prevent="openMenuUser">
<i id="show-btn" class="iconout material-icons d-none d-md-block" :class="isActiveMenuUser ? 'is-open' : ''">account_circle</i>
</button>
<button class="nuxticon d-md-none bg-white">
<i class="iconout material-icons d-block">search</i>
</button>
<button class="nuxticon bg-white relative btn-cart-shop" @click.prevent="openMiniCartShopDesktop">
<i class="iconout material-icons d-block" :class="isActiveMiniCartShopDesktop ? 'is-open' : ''">local_grocery_store</i>
<p class="counter-cart" :class="isActiveMiniCartShopDesktop ? 'is-open' : ''">
<span class="counter">{{ counter }}</span>
</p>
</button>
</div>
</div>
</nav>
</template>
<script>
import { mapState } from 'vuex'
import ModalCategories from '@/components/Header/ModalCategories';
import ItemTemplate from '@/components/Header/search/ItemTemplate';
export default {
name: 'navbarNavigate',
components: {
ModalCategories
},
data(){
return {
loading: false,
URL_IMG_API: process.env.API_CLOUDINARY_IMG,
itemsApi: [],
item : "",
items: [],
results: [],
total: 0,
activeSearch: '',
template: ItemTemplate
}
},
computed: {
...mapState({
//isOpenLogin: state => state.signUp
isActiveMenuUser: state => state.navigation.isActiveMenuUser,
isActiveMiniCartShopDesktop: state => state.navigation.isActiveMiniCartShopDesktop,
isActiveSubMenuOverlay: state => state.navigation.isActiveSubMenuOverlay,
isActiveMenuCategories: state => state.navigation.isActiveMenuCategories,
listCategories: state => state.navigation.listCategories,
counter: state => state.cart.cartQuantity
})
},
created() {
},
beforeMount() {
},
mounted() {
this.loading = true;
},
methods: {
selectItem(){
console.log("entro al select item");
this.activeSearch = '';
this.item = "";
this.items = [];
this.total = 0;
},
goToProductLink(){
console.log("ITEM");
console.log(this.item);
if( !this.isEmpty(this.item) ){
let productLink = '/p/' + this.item.link;
this.activeSearch = '';
this.item = "";
this.items = [];
this.total = 0;
this.$router.push(productLink);
}
},
getLabel (item) {
console.log("ITEM");
console.log(item);
this.item = item;
return item.name
},
updateItems (text) {
console.log("ENTRO AL updateItems");
console.log(text);
if(text !== ""){
//guiate del json de abajo
this.$axios.$get('/search',{params: {q: text}})
.then(response => {
console.log("ENTRO");
console.log(response);
this.items = response.data;
this.total = response.data.length;
if( response.data.length ){
this.activeSearch = 'active-menu';
}else{
this.activeSearch = '';
}
})
.catch(e => {
console.log("ERROR DEL API GET");
console.log(e);
})
}else{
}
},
isEmpty(obj) {
return Object.keys(obj).length === 0;
},
openOverlay (){
let submenuOverlay = document.getElementsByClassName("submenu-overlay");
let headerHeight = document.getElementsByClassName("header")[0].offsetHeight;
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
submenuOverlay[0].style.height = (scrollHeight - headerHeight ) + "px";
},
openMiniCartShopDesktop() {
if(this.isActiveMiniCartShopDesktop){
this.$store.commit('navigation/setIsActiveSubMenuOverlay', false);
this.$store.commit('navigation/setIsActiveMiniCartShopDesktop', false);
this.$store.commit('navigation/setIsActiveMenuUser', false);
this.$store.commit('navigation/setIsActiveMenuCategories', false);
}else{
this.openOverlay();
this.$store.commit('navigation/setIsActiveSubMenuOverlay', true);
this.$store.commit('navigation/setIsActiveMiniCartShopDesktop', true);
this.$store.commit('navigation/setIsActiveMenuUser', false);
this.$store.commit('navigation/setIsActiveMenuCategories', false);
}
},
openMenuUser() {
if(this.isActiveMenuUser){
this.$store.commit('navigation/setIsActiveSubMenuOverlay', false);
this.$store.commit('navigation/setIsActiveMiniCartShopDesktop', false);
this.$store.commit('navigation/setIsActiveMenuUser', false);
this.$store.commit('navigation/setIsActiveMenuCategories', false);
}else{
this.openOverlay();
this.$store.commit('navigation/setIsActiveSubMenuOverlay', true);
this.$store.commit('navigation/setIsActiveMiniCartShopDesktop', false);
this.$store.commit('navigation/setIsActiveMenuUser', true);
this.$store.commit('navigation/setIsActiveMenuCategories', false);
}
if(this.isActiveMenuCategories){
document.getElementById('btn-menu-burguer').classList.add('active');
}else{
document.getElementById('btn-menu-burguer').classList.remove('active');
}
if(this.isActiveMenuCategories){
document.getElementById('btn-menu-burguer-search').classList.add('active');
}else{
document.getElementById('btn-menu-burguer-search').classList.remove('active');
}
},
async openMenuCategories() {
let that = this;
console.log("entro al openMenuCategories");
if( !this.listCategories.length ){
try{
let getInfoCategoriesFromApi = await this.$axios.$get(`/categories` );
console.log("getInfoCategoriesFromApi");
console.log(getInfoCategoriesFromApi);
if(getInfoCategoriesFromApi.status === 200){
that.$store.commit('navigation/setListCategories', getInfoCategoriesFromApi.data);
}else{
console.log("Error en el API, no devolvio 200");
/*
let errorMensajeServer = "Error en el API de api/desktop/menu al traer la data.";
that.$nuxt.$emit('notification', {
type: 'error',
message: errorMensajeServer,
action1: { label: 'OK', action: 'close' }
})
*/
}
}catch (e) {
console.log("Error en el API");
console.log(e);
/*
let errorMensajeServer = "Error en el catch del servidor.";
that.$nuxt.$emit('notification', {
type: 'error',
message: errorMensajeServer,
action1: { label: 'OK', action: 'close' }
})
*/
}
}
if(this.isActiveMenuCategories){
this.$store.commit('navigation/setIsActiveSubMenuOverlay', false);
this.$store.commit('navigation/setIsActiveMiniCartShopDesktop', false);
this.$store.commit('navigation/setIsActiveMenuUser', false);
this.$store.commit('navigation/setIsActiveMenuCategories', false);
}else{
this.openOverlay();
this.$store.commit('navigation/setIsActiveSubMenuOverlay', true);
this.$store.commit('navigation/setIsActiveMiniCartShopDesktop', false);
this.$store.commit('navigation/setIsActiveMenuUser', false);
this.$store.commit('navigation/setIsActiveMenuCategories', true);
}
if(this.isActiveMenuCategories){
document.getElementById('btn-menu-burguer').classList.add('active');
}else{
document.getElementById('btn-menu-burguer').classList.remove('active');
}
if(this.isActiveMenuCategories){
document.getElementById('btn-menu-burguer-search').classList.add('active');
}else{
document.getElementById('btn-menu-burguer-search').classList.remove('active');
}
},
},
destroyed () {
}
}
</script>
json:
{
status: 200,
data: [
{
id: 27,
sku: "ES.001",
link: "escritorio-devon-windsor",
name: "Escritorio Devon Windsor",
description: "El escritorio Devon Windsor está diseñado para ayudarte a organizar mejor tus libros, cuadernos y demás objetos, pues cuenta con distintos compartimentos y un cajón con chapa. Puedes darle doble uso, como escritorio o mueble organizador, ya que cuenta con un tablero plegable muy práctico. Está elaborado con melamina de 18 mm y todos los lados serán recubiertos por tapacantos de PVC.",
categoryId: 1,
subCategoryId: 4,
stock: 10,
model: null,
size: null,
image: "EscritorioDevonWindsor-01.jpg",
brand: "",
price: "728",
discount: "40",
status: false,
createdAt: "2019-02-01T11:31:59.000Z",
updatedAt: "2019-02-01T16:31:59.000Z",
productId: null
},
{
id: 49,
sku: "ES.002",
link: "escritorio-bianca-balti",
name: "Escritorio Bianca Balti",
description: "Con el escritorio Bianca Balti podrás ordenar tus libros, revistas y demás materiales. Es el mueble ideal para cualquier dormitorio o sala de estudio. Está elaborado con melamina de 18 mm y todos los lados serán recubiertos por tapacantos de PVC.",
categoryId: 1,
subCategoryId: 4,
stock: 10,
model: null,
size: null,
image: "EscritorioBiancaBalti-01.jpg",
brand: "",
price: "289",
discount: "40",
status: true,
createdAt: "2019-03-13T14:26:37.000Z",
updatedAt: "2019-03-13T19:26:37.000Z",
productId: null
},
{
id: 50,
sku: "ES.003",
link: "escritorio-audrey",
name: "Escritorio Audrey",
description: "Con el escritorio Audrey podrás ordenar tus libros, revistas y demás materiales. Es el mueble ideal para cualquier dormitorio o sala de estudio. Está elaborado con melamina de 18 mm y todos los lados serán recubiertos por tapacantos de PVC.",
categoryId: 1,
subCategoryId: 4,
stock: 10,
model: null,
size: null,
image: "EscritorioAudrey-01.jpg",
brand: "",
price: "306",
discount: "40",
status: true,
createdAt: "2019-03-13T14:40:34.000Z",
updatedAt: "2019-03-13T19:40:34.000Z",
productId: null
},
{
id: 51,
sku: "ES.004",
link: "escritorio-lambert",
name: "Escritorio Lambert",
description: "Con el escritorio Lambert podrás ordenar tus libros, revistas y demás materiales. Es el mueble ideal para cualquier dormitorio o sala de estudio. Está elaborado con melamina de 18 mm y todos los lados serán recubiertos por tapacantos de PVC.",
categoryId: 1,
subCategoryId: 4,
stock: 10,
model: null,
size: null,
image: "EscritorioLambert-01.jpg",
brand: "",
price: "293",
discount: "40",
status: true,
createdAt: "2019-03-13T15:24:34.000Z",
updatedAt: "2019-03-13T20:24:34.000Z",
productId: null
},
{
id: 52,
sku: "ES.006",
link: "escritorio-anais-mali",
name: "Escritorio Anais Mali",
description: "Con el escritorio Anais Mali podrás ordenar tus libros, revistas y demás materiales. Es el mueble ideal para cualquier dormitorio o sala de estudio. Está elaborado con melamina de 18 mm y todos los lados serán recubiertos por tapacantos de PVC.",
categoryId: 1,
subCategoryId: 4,
stock: 10,
model: null,
size: null,
image: "EscritorioAnaisMali-01.jpg",
brand: "",
price: "371",
discount: "40",
status: true,
createdAt: "2019-03-13T15:48:43.000Z",
updatedAt: "2019-03-13T20:48:43.000Z",
productId: null
},
{
id: 53,
sku: "ES.007",
link: "escritorio-bialik",
name: "Escritorio Bialik",
description: "Con el escritorio Bialik podrás ordenar tus libros, revistas y demás materiales. Es el mueble ideal para cualquier dormitorio o sala de estudio. Está elaborado con melamina de 18 mm y todos los lados serán recubiertos por tapacantos de PVC.",
categoryId: 1,
subCategoryId: 4,
stock: 10,
model: null,
size: null,
image: "EscritorioBialik-01.jpg",
brand: "",
price: "360",
discount: "40",
status: true,
createdAt: "2019-03-13T17:02:27.000Z",
updatedAt: "2019-03-13T22:02:27.000Z",
productId: null
},
{
id: 54,
sku: "ES.008",
link: "escritorio-grace-bol",
name: "Escritorio Grace Bol",
description: "Con el escritorio Grace Bol podrás ordenar tus libros, revistas y demás materiales. Es el mueble ideal para cualquier dormitorio o sala de estudio. Está elaborado con melamina de 18 mm y todos los lados serán recubiertos por tapacantos de PVC.",
categoryId: 1,
subCategoryId: 4,
stock: 10,
model: null,
size: null,
image: "EscritorioGraceBol-01.jpg",
brand: "",
price: "277",
discount: "40",
status: true,
createdAt: "2019-03-14T08:55:00.000Z",
updatedAt: "2019-03-14T13:55:00.000Z",
productId: null
},
{
id: 55,
sku: "ES.009",
link: "escritorio-gail-elliott",
name: "Escritorio Gail Elliott",
description: "Con el escritorio Gail Elliott podrás ordenar tus libros, revistas y demás materiales. Es el mueble ideal para cualquier dormitorio o sala de estudio. Está elaborado con melamina de 18 mm y todos los lados serán recubiertos por tapacantos de PVC.",
categoryId: 1,
subCategoryId: 4,
stock: 10,
model: null,
size: null,
image: "EscritorioGailElliott-01.jpg",
brand: "",
price: "265",
discount: "40",
status: true,
createdAt: "2019-03-14T09:25:08.000Z",
updatedAt: "2019-03-14T14:25:08.000Z",
productId: null
},
{
id: 56,
sku: "ES.010",
link: "escritorio-saira-mohan",
name: "Escritorio Saira Mohan",
description: "Con el escritorio Saira Mohan podrás ordenar tus libros, revistas y demás materiales. Es el mueble ideal para cualquier dormitorio o sala de estudio. Está elaborado con melamina de 18 mm y todos los lados serán recubiertos por tapacantos de PVC.",
categoryId: 1,
subCategoryId: 4,
stock: 10,
model: null,
size: null,
image: "EscritorioSairaMohan-01.jpg",
brand: "",
price: "359",
discount: "40",
status: true,
createdAt: "2019-03-14T10:28:42.000Z",
updatedAt: "2019-03-14T15:28:42.000Z",
productId: null
},
{
id: 57,
sku: "ES.011",
link: "escritorio-lais-oliveira",
name: "Escritorio Lais Oliveira",
description: "Con el escritorio Lais Oliveira podrás ordenar tus libros, revistas y demás materiales. Su tamaño lo hace ideal para dormitorios de tamaño reducido. Está elaborado con melamina de 18 mm y todos los lados serán recubiertos por tapacantos de PVC.",
categoryId: 1,
subCategoryId: 4,
stock: 10,
model: null,
size: null,
image: "EscritorioLaisOliveira-01.jpg",
brand: "",
price: "236",
discount: "40",
status: true,
createdAt: "2019-03-14T10:38:05.000Z",
updatedAt: "2019-03-14T15:38:05.000Z",
productId: null
},
{
id: 67,
sku: "ES.005",
link: "escritorio-sadie",
name: "Escritorio Sadie",
description: "Con el escritorio Sadie podrás ordenar tus libros, revistas y demás materiales. Es el mueble ideal para cualquier dormitorio o sala de estudio. Está elaborado con melamina de 18 mm y todos los lados serán recubiertos por tapacantos de PVC.",
categoryId: 1,
subCategoryId: 4,
stock: 10,
model: null,
size: null,
image: "EscritorioSadie-01.jpg",
brand: "",
price: "287",
discount: "40",
status: true,
createdAt: "2020-02-26T15:31:59.000Z",
updatedAt: "2020-02-26T16:31:59.000Z",
productId: null
}
],
msg: "Coincidencias encontradas.",
success: true
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment