:art: https://github.com/siyuan-note/siyuan/issues/10739

app/src/config/util/snippets.ts

@@ -63,6 +63,11 @@ export const openSnippets = () => {
     <div>
         <div class="fn__flex">
             <div class="fn__flex-1"></div>
+            <div class="b3-form__icon">
+                <svg class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>
+                <input data-type="css" data-action="search" type="text" placeholder="Enter ${window.siyuan.languages.search}" class="b3-text-field b3-form__icon-input">
+            </div>
+            <div class="fn__space"></div>
             <span aria-label="${window.siyuan.languages.addAttr} CSS" id="addCodeSnippetCSS" class="b3-tooltips b3-tooltips__sw block__icon block__icon--show">
                 <svg><use xlink:href="#iconAdd"></use></svg>
             </span>
@@ -74,6 +79,11 @@ export const openSnippets = () => {
     <div class="fn__none">
         <div class="fn__flex">
             <div class="fn__flex-1"></div>
+             <div class="b3-form__icon">
+                <svg class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>
+                <input data-type="js" data-action="search" type="text" placeholder="Enter ${window.siyuan.languages.search}" class="b3-text-field b3-form__icon-input">
+            </div>
+            <div class="fn__space"></div>
             <span aria-label="${window.siyuan.languages.addAttr} JS" id="addCodeSnippetJS" class="b3-tooltips b3-tooltips__sw block__icon block__icon--show">
                 <svg><use xlink:href="#iconAdd"></use></svg>
             </span>
@@ -151,6 +161,26 @@ export const openSnippets = () => {
                 target = target.parentElement;
             }
         });
+        dialog.element.querySelectorAll('[data-action="search"]').forEach((inputItem: HTMLInputElement) => {
+            inputItem.addEventListener("keydown", (event: KeyboardEvent) => {
+                if (event.key === "Enter" && !event.isComposing) {
+                    fetchPost("/api/snippet/getSnippet", {
+                        type: "all",
+                        enabled: 2,
+                        keyword: inputItem.value
+                    }, (searchResponse) => {
+                        dialog.element.querySelectorAll(`.fn__flex-1 > div > [data-type="${inputItem.dataset.type}"]`).forEach((snipeetPanel: Element) => {
+                            snipeetPanel.classList.add("fn__none");
+                        })
+                        searchResponse.data.snippets.forEach((snippetItem: ISnippet) => {
+                            if (snippetItem.type === inputItem.dataset.type) {
+                                dialog.element.querySelector(`[data-id="${snippetItem.id}"]`).classList.remove("fn__none");
+                            }
+                        });
+                    });
+                }
+            });
+        })
     });
 };