英文:
How to add a not found option in the search bar in Tailwind css and Alpine js
问题
我正在使用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;
}
}"
再次提前感谢。
英文:
I am working on a project in tailwindcss and alpine js. I want to make a search bar in it. I have made the search bar but the "Not found" feature is not getting formed. I tried multiple ways still not got the result. Please help me to put a not found feature in my code. Thanks is advance.
Here's my code:
<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>
the x-data part of the immediate div is :
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;
}
}"
Again thanks in advance.
答案1
得分: 0
你需要在组件定义中的每个数据属性前加上 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>
英文:
You need to prefix each data property with this. in the component definition, so you have to use this.isNone in the getter method:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论