pull/1021/head
Yiğit FINDIKLI 2021-02-18 11:42:56 +03:00
commit 0253a4ac3d
2 changed files with 49 additions and 39 deletions

View File

@ -2,15 +2,15 @@
"data": [
{
"id": "1000",
"code": "f230fh0g3",
"name": "Bamboo Watch",
"code": "vbb124btr",
"name": "Game Controller",
"description": "Product Description",
"image": "bamboo-watch.jpg",
"price": 65,
"category": "Accessories",
"quantity": 24,
"inventoryStatus": "INSTOCK",
"rating": 5
"image": "game-controller.jpg",
"price": 99,
"category": "Electronics",
"quantity": 2,
"inventoryStatus": "LOWSTOCK",
"rating": 4
},
{
"id": "1001",
@ -62,15 +62,15 @@
},
{
"id": "1005",
"code": "av2231fwg",
"name": "Brown Purse",
"code": "cm230f032",
"name": "Gaming Set",
"description": "Product Description",
"image": "brown-purse.jpg",
"price": 120,
"category": "Accessories",
"quantity": 0,
"inventoryStatus": "OUTOFSTOCK",
"rating": 4
"image": "gaming-set.jpg",
"price": 299,
"category": "Electronics",
"quantity": 63,
"inventoryStatus": "INSTOCK",
"rating": 3
},
{
"id": "1006",
@ -98,27 +98,27 @@
},
{
"id": "1008",
"code": "vbb124btr",
"name": "Game Controller",
"code": "f230fh0g3",
"name": "Bamboo Watch",
"description": "Product Description",
"image": "game-controller.jpg",
"price": 99,
"category": "Electronics",
"quantity": 2,
"inventoryStatus": "LOWSTOCK",
"rating": 4
"image": "bamboo-watch.jpg",
"price": 65,
"category": "Accessories",
"quantity": 24,
"inventoryStatus": "INSTOCK",
"rating": 5
},
{
"id": "1009",
"code": "cm230f032",
"name": "Gaming Set",
"code": "av2231fwg",
"name": "Brown Purse",
"description": "Product Description",
"image": "gaming-set.jpg",
"price": 299,
"category": "Electronics",
"quantity": 63,
"inventoryStatus": "INSTOCK",
"rating": 3
"image": "brown-purse.jpg",
"price": 120,
"category": "Accessories",
"quantity": 0,
"inventoryStatus": "OUTOFSTOCK",
"rating": 4
}
]
}

View File

@ -25,11 +25,11 @@
</template>
<template v-else>
<template v-for="(optionGroup, i) of suggestions" :key="getOptionGroupRenderKey(optionGroup)">
<li class="p-autocomplete-item-group" >
<li class="p-autocomplete-item-group">
<slot name="optiongroup" :item="optionGroup" :index="i">{{getOptionGroupLabel(optionGroup)}}</slot>
</li>
<li v-for="(item, i) of getOptionGroupChildren(optionGroup)" class="p-autocomplete-item" :key="i" @click="selectItem($event, item)" role="option" v-ripple>
<slot name="item" :item="item" :index="i">{{getItemContent(item)}}</slot>
<li v-for="(item, j) of getOptionGroupChildren(optionGroup)" class="p-autocomplete-item" :key="j" @click="selectItem($event, item)" role="option" v-ripple :data-group="i" :data-index="j">
<slot name="item" :item="item" :index="j">{{getItemContent(item)}}</slot>
</li>
</template>
</template>
@ -110,7 +110,8 @@ export default {
searching: false,
focused: false,
overlayVisible: false,
inputTextValue: null
inputTextValue: null,
highlightItem: null
};
},
watch: {
@ -385,10 +386,10 @@ export default {
event.preventDefault();
break;
//enter,tab
//enter
case 13:
if (highlightItem) {
this.selectItem(event, this.suggestions[DomHandler.index(highlightItem)]);
this.selectHighlightItem(event, highlightItem);
this.hideOverlay();
}
@ -404,7 +405,7 @@ export default {
//tab
case 9:
if (highlightItem) {
this.selectItem(event, this.suggestions[DomHandler.index(highlightItem)]);
this.selectHighlightItem(event, highlightItem);
}
this.hideOverlay();
@ -436,6 +437,15 @@ export default {
}
}
},
selectHighlightItem(event, item) {
if (this.optionGroupLabel) {
let optionGroup = this.suggestions[item.dataset.group];
this.selectItem(event, this.getOptionGroupChildren(optionGroup)[item.dataset.index]);
}
else {
this.selectItem(event, this.suggestions[DomHandler.indexOfType(item)]);
}
},
findNextItem(item) {
let nextItem = item.nextElementSibling;