Fuzzy in Vue

Zusammenfassung

Du kannst diese Bibliothek in Vue genauso verwenden wie in einem regulären JavaScript-Projekt, aber wir bieten zusätzliche Hilfsfunktionen, um die Integration zu erleichtern.

Die Hauptunterschiede sind:

Interne Verwendung von ref und computed für Reaktivität.
Verwendung von watch für Änderungen in der Abfrage.

Es ist eine Konvention, die zentrale Bibliothek von der Vue-spezifischen Bibliothek zu trennen. Auf diese Weise kannst du die zentrale Bibliothek in anderen Frameworks oder sogar in reinem JavaScript verwenden. Mit diesem Ansatz ist das importierte Paket kleiner und der Code besser organisiert.

API

`useFuzzy`

Dies ist der Haupt-Hook für den Vue-Adapter, der eine optimierte Möglichkeit bietet, Elemente zu durchsuchen.

Er akzeptiert dieselben Eigenschaften wie die zentrale unscharfe Suche sowie einige zusätzliche Optionen:

list - Die ref-Liste der zu durchsuchenden Elemente. Erforderlich.
query - Die ref-Abfrage für die Suche. Erforderlich.

Die Struktur sieht immer so aus:

lib.ts

const fuzzy = useFuzzy({ list, query, options });

Jetzt benötigst du nur noch einen Schritt: Du musst die Funktion fuzzy nicht mehr erstellen und sie dann mit der Abfrage aufrufen. Du kannst direkt useFuzzy verwenden, und es wird intern erledigt.

Alle Optionen von `useFuzzy`

lib.ts

const filteredList = useFuzzy({
  list, // erforderlich, die Liste der zu durchsuchenden Elemente
  query, // erforderlich, die Abfrage für die Suche (wenn leer, werden alle Elemente zurückgegeben)
  options: {
    key: "name", // optional, der Schlüssel, wenn die Elemente Objekte sind
    getKey: (item) => [item.name, item.description], // optional, der Schlüssel, wenn die Elemente Objekte sind (ähnlich wie key, aber kann eine Funktion oder mehrere Schlüssel sein)
    mapResult: (item) => ( item ),  // beliebige Mapping-Funktion, nimmt `Result<T>` als Eingabe
    debug: true, // optional, wenn wahr, werden die Ergebnisse in der Konsole protokolliert
    limit: 10, // optional, die maximale Anzahl der zurückzugebenden Ergebnisse  
    maxScore: 0.5, // optional, die maximale zurückzugebende Punktzahl 
  }
})

Beispiele

Statische String-Liste

App.vue

<template>
  <div>
    <input v-model="query" placeholder="Suchen..." />
    <ul>
      <li v-for="(result, index) in fuzzySearch.results" :key="index">
        {{ result }}
      </li>
    </ul>
  </div>
</template>
 
<script lang="ts">
import { ref } from "vue";
import { useFuzzy } from "@polgubau/fuzzy/vue";
 
export default {
  setup() {
    const list = ref<string[]>(["Apfel", "Banane", "Kirsche", "Traube", "Ananas", "Orange", "Erdbeere", "Wassermelone"]);
    const query = ref("");
 
    // Verwendung des Composables
    const fuzzySearch = useFuzzy<string>({ list, query });
 
    return {
      query,
      fuzzySearch,
    };
  },
};
</script>

Suche nach Objekten mit einem Schlüssel

App.vue

<template>
  <div>
    <input v-model="query" placeholder="Nach einer Frucht suchen..." />
    <div v-for="category in categories" :key="category.id">
      <h3>{{ category.name }}</h3>
      <ul>
        <li v-for="fruit in category.fruits" :key="fruit.id">{{ fruit.name }}</li>
      </ul>
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useFuzzy } from '@polgubau/fuzzy/vue';
import type { Category, Fruit } from './types';
 
export default defineComponent({
  name: 'CategorySearch',
  setup() {
    const categories = ref<Category[]>([
      { id: 1, name: 'Zitrusfrüchte'},
      { id: 2, name: 'Waldfrüchte' },
    ]);
 
    const query = ref('');
    
    const fuzzyResponse = useFuzzy({list: categories, options:{ query, key: "name"}});
      // Du kannst auch "getKey: (item) => [item.name, item.map(fruit => fruit.name)]" verwenden, um nach mehreren Schlüsseln zu suchen
     
    return { categories, query, fuzzyResponse };
  },
});
</script>

Suche nach Objekten mit mehreren Schlüsseln

App.vue

<template>
  <div>
    <input v-model="query" placeholder="Nach einer Frucht suchen..." />
    <div v-for="category in categories" :key="category.id">
      <h3>{{ category.name }}</h3>
      <ul>
        <li v-for="fruit in category.fruits" :key="fruit.id">{{ fruit.name }}</li>
      </ul>
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useFuzzy } from  '@polgubau/fuzzy/vue';
import type { Category, Fruit } from './types';
 
export default defineComponent({
  name: 'CategorySearch',
  setup() {
    const categories = ref<Category[]>([
      { id: 1, name: 'Zitrusfrüchte', fruits: [{ id: 1, name: 'Orange' }, { id: 2, name: 'Zitrone' }] },
      { id: 2, name: 'Waldfrüchte', fruits: [{ id: 3, name: 'Erdbeere' }, { id: 4, name: 'Heidelbeere' }] },
    ]);
 
    const query = ref('');
    
    const fuzzyResponse = useFuzzy<Fruit, Fruit>({list: categories, options:{ query, getText: (item) => [item.name, item.map(fruit => fruit.name)]}
 
    return { categories, query, fuzzyResponse };
  },
});
</script>

Suche nach exakten Übereinstimmungen

App.vue

<template>
  <div>
    <input v-model="query" placeholder="Nach einem Produkt suchen..." />
    <div v-if="fuzzyResponse.hasExactMatch">
      <p>Exakte Übereinstimmung gefunden!</p>
    </div>
    <ul>
      <li v-for="product in fuzzyResponse.results" :key="product.id">{{ product.name }}</li>
    </ul>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useFuzzy } from '@polgubau/fuzzy/vue';
import type { Product } from './types';
 
export default defineComponent({
  name: 'ProductSearch',
  setup() {
    const products = ref<Product[]>([
      { id: 1, name: 'Smartphone' },
      { id: 2, name: 'Laptop' },
      { id: 3, name: 'Tablet' },
      { id: 4, name: 'Smartwatch' },
     ]);
 
    const query = ref('');
    
    const fuzzyResponse = useFuzzy({ list: products, query, options: { maxScore: 0.5 } });
 
    return { query, fuzzyResponse };
  },
});
</script>
 
## Referenzen
 
### Optionen 
<AutoTypeTable path="./src/types/lib.ts" name="FuzzyOptions" />
 
### Antwort 
<AutoTypeTable path="./src/types/lib.ts" name="FuzzyResponse" />
 
### Der Typ Ergebnis 
<AutoTypeTable path="./src/types/lib.ts" name="Result" />

Fuzzy Finder in Vue

Zusammenfassung

Einfaches Beispiel

API

`useFuzzy`

Alle Optionen von `useFuzzy`

Beispiele

Statische String-Liste

Suche nach Objekten mit einem Schlüssel

Suche nach Objekten mit mehreren Schlüsseln

Suche nach exakten Übereinstimmungen

On this page