site: bind search component open to items.length

This commit is contained in:
Lucas Gabriel Vuotto 2025-04-28 15:58:00 +00:00
parent cc25efc5f4
commit bf21610576
2 changed files with 4 additions and 5 deletions

View file

@ -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) {

View file

@ -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' : ''"