使用AlpineJS根据菜单列表进行搜索/筛选

Question

我对Alpine.js还很陌生，希望为项目列表创建一个简单的搜索/过滤输入。

我看到了一些使用<template>的例子，但我对这种特定的技术不感兴趣。

项目列表已经存在于页面上，因此基于"标记"数组隐藏和取消隐藏项目是一个简单的目标。

1. 我需要获取列表中的所有项目(以及子菜单)。(因此在<li>和<ul>上使用x-ref
2. 根据搜索输入筛选数组。(卡住)
3. 隐藏剩余的列表！==搜索输入。(卡住)

我有一个关于代码笔的简单例子

我不确定将列表项绑定到x-data的最佳方式，然后我假设使用.filter( $ref.startsWith(.this.search))来过滤这些项。

‍♂️

任何帮助都会被通知！

Answer 1

您需要使用引用当前DOM元素的$el魔术属性，而不是x-ref：只要将其传递给show_item($el)方法，该方法将在元素的textContent属性包含搜索字符串的情况下返回true。

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div class="wrapper" x-data="{
search: '',
show_item(el) {
return this.search === '' || el.textContent.includes(this.search)
}
}">
<input class="search-input" type="search" placeholder="Filter: A B C D" x-model="search">
<div>
<p>Search Input: <span x-text="search"></span></p>
</div>
<p><b>Menu:</b></p>
<ul class="menu">
<li x-show="show_item($el)">Item A</li>
<li x-show="show_item($el)">Item B</li>
<li x-show="show_item($el)">
Dropdown C
<ul>
<li x-show="show_item($el)">Item C:A</li>
<li x-show="show_item($el)">Item C:B</li>
</ul>
</li>
<li x-show="show_item($el)">Item D</li>
<li x-show="show_item($el)">Item E</li>
<li x-show="show_item($el)">Item F</li>
<li x-show="show_item($el)">
Dropdown G
<ul>
<li x-show="show_item($el)">Item G:A</li>
<li x-show="show_item($el)">Item G:B</li>
</ul>
</li>
</ul>
</div>