first experiment with fuse.js for searching

main.py

@@ -20,6 +20,7 @@ import prometheus
 from nicegui import Client, app
 from nicegui import globals as nicegui_globals
 from nicegui import ui
+from search import search
 from website import documentation, example_card, svg
 from website.demo import bash_window, browser_window, python_window
 from website.documentation_tools import create_anchor_name, element_demo, generate_class_doc
@@ -83,6 +84,7 @@ def add_header(menu: Optional[ui.left_drawer] = None) -> None:
         with ui.row().classes('max-lg:hidden'):
             for title, target in menu_items.items():
                 ui.link(title, target).classes(replace='text-lg text-white')
+        search()
         with ui.link(target='https://discord.gg/TEpFeAaF4f').classes('max-[435px]:hidden').tooltip('Discord'):
             svg.discord().classes('fill-white scale-125 m-1')
         with ui.link(target='https://www.reddit.com/r/nicegui/').classes('max-[385px]:hidden').tooltip('Reddit'):

search.py

@@ -0,0 +1,13 @@
+from typing import Any, Callable, Optional
+
+from nicegui.dependencies import register_component
+from nicegui.element import Element
+
+register_component('search', __file__, 'search.vue')
+
+
+class search(Element):
+
+    def __init__(self) -> None:
+        """Search NiceGUI documentation"""
+        super().__init__('search')

search.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="q-pa-md position-relative">
+    <q-input v-model="query" color="white" placeholder="Search ..." />
+    <q-list class="search-results">
+      <q-item clickable v-for="result in results" :key="result.item.title" @click="goTo(result.item.url)">
+        <q-item-section>
+          <q-item-label>{{ result.item.title }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </div>
+</template>
+
+<style>
+.position-relative {
+  position: relative;
+}
+
+.search-results {
+  position: absolute;
+  color: white;
+  width: 100%;
+  background: rgba(166, 222, 214, 0.519);
+  z-index: 9999;
+  max-height: 200px;
+  overflow-y: auto;
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      query: "",
+      results: [],
+      documents: [
+        {
+          title: "Introduction",
+          content: "This is the introduction to our documentation...",
+          url: "/docs/introduction",
+        },
+        {
+          title: "Getting Started",
+          content: "Here's how to get started with our project...",
+          url: "/docs/getting_started",
+        },
+        // More documents...
+      ],
+      fuse: null,
+    };
+  },
+
+  watch: {
+    query() {
+      this.search();
+    },
+  },
+
+  created() {
+    let options = {
+      keys: ["title", "content"],
+    };
+
+    this.fuse = new Fuse(this.documents, options);
+  },
+
+  methods: {
+    search() {
+      this.results = this.fuse.search(this.query);
+      console.log(this.results);
+    },
+
+    goTo(url) {
+      this.$router.push(url);
+    },
+  },
+};
+</script>

website/static/header.html

@@ -21,3 +21,4 @@
     else header.classList.remove("fade");
   };
 </script>
+<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>