site: bind search component open to items.length
This commit is contained in:
parent
cc25efc5f4
commit
bf21610576
2 changed files with 4 additions and 5 deletions
|
@ -25,7 +25,7 @@ document.addEventListener('alpine:init', () => {
|
||||||
return;
|
return;
|
||||||
if (currentWord === this.currentWord) {
|
if (currentWord === this.currentWord) {
|
||||||
/* Show previous items, if any. */
|
/* Show previous items, if any. */
|
||||||
this.open = true;
|
this.open = this.items.length > 0;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.currentWord = currentWord;
|
this.currentWord = currentWord;
|
||||||
|
@ -35,12 +35,13 @@ document.addEventListener('alpine:init', () => {
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
this.items = [];
|
this.items = [];
|
||||||
|
this.open = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.activeItem = null;
|
this.activeItem = null;
|
||||||
this.items = await response.json();
|
this.items = await response.json();
|
||||||
this.open = true;
|
this.open = this.items.length > 0;
|
||||||
},
|
},
|
||||||
|
|
||||||
async fetchSuggestionsOnInput(evt) {
|
async fetchSuggestionsOnInput(evt) {
|
||||||
|
|
|
@ -16,9 +16,7 @@
|
||||||
@keydown.up.prevent="moveActiveItemBackward"
|
@keydown.up.prevent="moveActiveItemBackward"
|
||||||
@keydown.down.prevent="moveActiveItemForward"
|
@keydown.down.prevent="moveActiveItemForward"
|
||||||
@keydown.escape="open = false">
|
@keydown.escape="open = false">
|
||||||
<ul
|
<ul x-ref="suggestions" x-cloak x-show="open">
|
||||||
x-ref="suggestions"
|
|
||||||
x-cloak x-show="open && items.length > 0">
|
|
||||||
<template x-for="(item, index) in sortedItems" :key="item.display">
|
<template x-for="(item, index) in sortedItems" :key="item.display">
|
||||||
<li
|
<li
|
||||||
:class="index === activeItem ? 'suggestion-hover' : ''"
|
:class="index === activeItem ? 'suggestion-hover' : ''"
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue