使用 AlpineJS 根据菜单列表进行搜索/过滤

Question

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

\n

我见过一些使用的示例<template>，但我对那种特定的技术不感兴趣。

\n

项目列表已存在于页面上，因此它是基于“标签”数组隐藏和取消隐藏项目的简单目标。

\n

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

\n

我在codepen上有一个简单的例子

\n

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

\n

\xe2\x80\x8d\xe2\x99\x82\xef\xb8\x8f

\n

任何帮助将不胜感激！

\n

Answer 1

您不需要x-ref使用$el引用当前 DOM 元素的魔法属性：只需将其传递给一个方法，该方法将在该元素的属性包含搜索字符串时show_item($el)返回。truetextContent

<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>