Get started with fuzzysort CDN

MIT licensed

Fuzzysort: library for fast, flexible string matching with partial and fuzzy options.

Tags:
  • fuzzy
  • search
  • filter
  • javascript
  • sublime

Stable version

Copied!

How to start using fuzzysort CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with fuzzysort CDN - cdnhub.io</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fuzzysearch.min.js"></script>
  <script src="https://cdn.cdnhub.io/fuzzysort/2.0.4/fuzzysort.js"></script>
</head>
<body>
  <input type="text" id="searchInput" placeholder="Search...">
  <ul id="searchResults"></ul>
  <script>
    const items = [
      "apple",
      "banana",
      "cherry",
      "date",
      "elderberry",
      "fig",
      "grape",
      "honeydew",
      "kiwi",
      "lemon"
    ];

    const searchInput = document.getElementById("searchInput");
    const searchResults = document.getElementById("searchResults");

    const createListItem = (term) => {
      const li = document.createElement("li");
      li.textContent = term;
      return li;
    };

    const fuzzySearch = new FuzzySearch("", items, {
      caseSensitive: false,
      threshold: 0.6,
      location: 0,
      maxPatternLength: 32,
      keys: ["term"]
    });

    searchInput.addEventListener("input", () => {
      const results = fuzzySearch.search(searchInput.value);
      searchResults.innerHTML = "";
      results.forEach((result) => {
        searchResults.appendChild(createListItem(result.item));
      });
    });
  </script>
</body>
</html>
Copied!

All versions