如何在Tailwind css和Alpine js的搜索栏中添加not found选项

Question

我正在做一个项目在tailwindcss和alpine js。我想在里面做一个搜索栏。我已经做了搜索栏，但是"未找到"功能尚未形成。我尝试了多种方法，仍然没有得到结果。请帮助我把一个未发现的功能在我的代码。谢谢你的预付。

下面是我的代码:

<ul class="max-h-72 scroll-py-2 overflow-y-auto text-sm text-gray-800" id="options" role="listbox">
<template x-for="(item, index) in searchResults">
<li class="cursor-default select-none px-4 py-2" role="option" x-text="item" tabindex="-1"></li>
</template>
</ul>

直接div的x-data部分为:

x-data="{ 
isNone:true,
search: '',
items: ['Apple', 'Banana', 'Guava', 'Ape', 'Bands'],
get searchResults () {
let datalist= this.items.filter(
i => i.startsWith(this.search)
);
isNone = datalist.length == 0;
return datalist;
}  
}"

再次提前感谢。

Answer 1

您需要在组件定义中用this.作为每个数据属性的前缀，因此您必须在getter方法中使用this.isNone:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{isNone:true,
search: '',
items: ['Apple', 'Banana', 'Guava', 'Ape', 'Bands'],
get searchResults () {
let datalist= this.items.filter(
i => i.startsWith(this.search)
);
this.isNone = datalist.length == 0;
return datalist;
}}">
<input type="text" x-model="search" />
<ul class="max-h-72 scroll-py-2 overflow-y-auto text-sm text-gray-800" id="options" role="listbox">
<template x-for="(item, index) in searchResults">
<li class="cursor-default select-none px-4 py-2" role="option" x-text="item" tabindex="-1"></li>
</template>
</ul>
<div x-show="isNone">Not found</div>
</div>