时间戳

首页 > 解决方案 > 如何在 svelte 中制作搜索过滤器

javascript - 如何在 svelte 中制作搜索过滤器

问题描述

我有两个组件在组件树中很远，我对如何在两者之间进行通信有疑问。我有搜索组件、listItems 和一个商店。

store.svelte

<script context="module" lang="ts">
 import type {Items} from '../../Models/Items.model';
 import { writable } from 'svelte/store';

 export const dataItems = writable<Items[]>([]);

  const filterInfo = (term:string) => {
     dataItems.update(item => {
           item.filter(x => {
                return x.name.toLowerCase().includes(term.toLowerCase())
                || x.description.toLowerCase().includes(term.toLowerCase());
           })
           return dataItems;
        })
    }*/


export const dispatcher = {filterInfo};

</script>

搜索组件

<script lang="ts">
    import { dispatcher } from './ViewI/store.svelte';
    

    let value:any;

    const handleChange = () => {
     dispatcher.filterInfo(value)
    console.log(value)
     }
    
    
</script>

<Search>
 <input bind:value
 on:input={handleChange}>
</Search>

listItems 组件

import type {Items} from '../../Models/Items.model';
import {dataItems,dispatcher} from './store.svelte';

export let items:Items[] =[];
export let value:any;

$:filterItems = items;

$: {
  filterItems = $dataItems.filter((item:any) => {
    return item.name  || item.description
  });
  
  dispatcher.filterInfo(value);
 }



</script>

<main>
  
      {#each [...filterItems] as item }
           <CardItems
              name={item.name}
              description={user.description}
              id={item.id}
            /> 
           {/each}

</main>

问题是如何将两个组件与您在输入中写入的值进行通信并制作过滤器。

标签： javascriptsveltesvelte-componentsvelte-store

解决方案

您可以使用派生存储来完成此操作。这是一个小例子。

设置三个商店：term将保存正在搜索的术语，items将保存完整的项目列表，并将是包含包含该术语的项目filtered的派生商店。它将在任何时候term或items更改时自动更新。

// stores.js
import { writable, derived } from 'svelte/store';

export const term = writable('');
export const items = writable(['dog', 'cat', 'fish', 'iguana']);
export const filtered = derived(
    [term, items], 
    ([$term, $items]) => $items.filter(x => x.includes($term))
);

然后，您可以在您的应用程序中使用这些商店。您的搜索组件可以像这样设置要搜索的术语。

<!-- Search.svelte -->
<script>
    import {term} from './stores.js';
    let val = '';
    
    $: term.set(val);
</script>

<label for="searchInput">Search</label>
<input bind:value={val} type="text" id="searchInput">

当您调用term.set(val)时，派生存储将自动更新。您可以在应用程序的任何组件中使用此存储。

<!-- ListItems.svelte -->
<script>
    import { filtered } from './stores.js';
</script>

<ul>
{#each $filtered as item}
    <li>{item}</li>
{/each}
</ul>

您可以在Svelte REPL中看到一个工作示例。

推荐阅读