diff --git a/app/src/config/util/snippets.ts b/app/src/config/util/snippets.ts
index e04651782..ae9d29672 100644
--- a/app/src/config/util/snippets.ts
+++ b/app/src/config/util/snippets.ts
@@ -65,7 +65,7 @@ export const openSnippets = () => {
             <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="${window.siyuan.languages.enterKey} ${window.siyuan.languages.search}" class="b3-text-field b3-form__icon-input">
+                <input data-type="css" data-action="search" type="text" placeholder="${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">
@@ -81,7 +81,7 @@ export const openSnippets = () => {
             <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="${window.siyuan.languages.enterKey} ${window.siyuan.languages.search}" class="b3-text-field b3-form__icon-input">
+                <input data-type="js" data-action="search" type="text" placeholder="${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">
@@ -162,28 +162,34 @@ export const openSnippets = () => {
             }
         });
         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");
-                            }
-                        });
-                    });
+            inputItem.addEventListener("input", (event: KeyboardEvent) => {
+                if (event.isComposing) {
+                    return
                 }
+                filterSnippet(dialog, inputItem)
+            });
+            inputItem.addEventListener("compositionend", () => {
+                filterSnippet(dialog, inputItem)
             });
         });
     });
 };
 
+const filterSnippet = (dialog: Dialog, inputItem: HTMLInputElement) => {
+    dialog.element.querySelectorAll(`.fn__flex-1 > div > [data-type="${inputItem.dataset.type}"]`).forEach((snippetPanel: Element) => {
+        const snippetName = snippetPanel.querySelector("input").value.toLowerCase();
+        const snippetContent = snippetPanel.querySelector("textarea").value.toLowerCase();
+        const searchValue = inputItem.value.toLowerCase();
+        if (!searchValue ||
+            (snippetName && (searchValue.includes(snippetName) || snippetName.includes(searchValue))) ||
+            (snippetContent && (snippetContent.includes(searchValue) || searchValue.includes(snippetContent)))) {
+            snippetPanel.classList.remove("fn__none");
+        } else {
+            snippetPanel.classList.add("fn__none");
+        }
+    });
+}
+
 const genSnippet = (options: ISnippet) => {
     return `<div data-id="${options.id || ""}" data-type="${options.type}">
     <div class="fn__hr--b"></div>