🎨 https://github.com/siyuan-note/siyuan/issues/10550

app/src/assets/scss/business/_av.scss

@@ -47,6 +47,14 @@
   &__views {
     align-items: center;
     box-shadow: 0px -1px inset var(--b3-theme-background-light);
+
+    &--show .block__icon {
+      opacity: 1;
+    }
+
+    .b3-text-field {
+      transition: var(--b3-width-transition);
+    }
   }
 
   &__title {

app/src/protyle/render/av/action.ts

@@ -115,6 +115,15 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.preventDefault();
             event.stopPropagation();
             return true;
+        } else if (type === "av-search-icon") {
+            const searchElement = blockElement.querySelector('input[data-type="av-search"]') as HTMLInputElement;
+            searchElement.style.width = "128px";
+            searchElement.style.paddingLeft = "";
+            searchElement.style.paddingRight = "";
+            searchElement.focus();
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
         } else if (type === "av-filter") {
             openMenuPanel({protyle, blockElement, type: "filters"});
             event.preventDefault();

app/src/protyle/render/av/render.ts

@@ -9,6 +9,7 @@ import {stickyRow} from "./row";
 import {getCalcValue} from "./calc";
 import {renderAVAttribute} from "./blockAttr";
 import {showMessage} from "../../../dialog/message";
+import {addClearButton} from "../../../util/addClearButton";
 
 export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, viewID?: string) => {
     let avElements: Element[] = [];
@@ -62,7 +63,8 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
                 created,
                 snapshot,
                 pageSize: parseInt(e.dataset.pageSize) || undefined,
-                viewID: newViewID
+                viewID: newViewID,
+                query: (e.querySelector('.b3-text-field[data-type="av-search"]') as HTMLInputElement)?.value || ""
             }, (response) => {
                 const data = response.data.view as IAVTable;
                 if (!e.dataset.pageSize) {
@@ -197,6 +199,13 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}</div>`;
                 <svg><use xlink:href="#iconSort"></use></svg>
             </span>
             <div class="fn__space"></div>
+            <span data-type="av-search-icon" class="block__icon">
+                <svg><use xlink:href="#iconSearch"></use></svg>
+            </span>
+            <div style="position: relative">
+                <input style="width:0;padding-left: 0;padding-right: 0;" data-type="av-search" class="b3-text-field b3-text-field--text" placeholder="${window.siyuan.languages.search}">
+            </div>
+            <div class="fn__space"></div>
             <span data-type="av-more" class="block__icon">
                 <svg><use xlink:href="#iconMore"></use></svg>
             </span>
@@ -280,6 +289,56 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}</div>`;
                 if (cb) {
                     cb();
                 }
+                const viewsElement = e.querySelector(".av__views") as HTMLElement;
+                const searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement;
+                searchInputElement.addEventListener("input", (event: KeyboardEvent) => {
+                    if (event.isComposing) {
+                        return;
+                    }
+                    if (searchInputElement.value) {
+                        viewsElement.classList.add("av__views--show");
+                    } else {
+                        viewsElement.classList.remove("av__views--show");
+                    }
+                });
+                searchInputElement.addEventListener("keydown", (event: KeyboardEvent) => {
+                    if (event.isComposing) {
+                        return;
+                    }
+                    if (event.key === "Enter") {
+                        e.removeAttribute("data-render");
+                        avRender(e, protyle)
+                        event.preventDefault();
+                    }
+                });
+                searchInputElement.addEventListener("compositionend", (event: KeyboardEvent) => {
+                    if (event.key === "Enter") {
+                        // todo
+                        event.preventDefault();
+                    }
+                });
+                searchInputElement.addEventListener("blur", (event: KeyboardEvent) => {
+                    if (event.isComposing) {
+                        return;
+                    }
+                    if (!searchInputElement.value) {
+                        viewsElement.classList.remove("av__views--show");
+                        searchInputElement.style.width = "0";
+                        searchInputElement.style.paddingLeft = "0";
+                        searchInputElement.style.paddingRight = "0";
+                    }
+                });
+                addClearButton({
+                    inputElement: searchInputElement,
+                    right: 0,
+                    height: searchInputElement.clientHeight,
+                    clearCB() {
+                        viewsElement.classList.remove("av__views--show");
+                        searchInputElement.style.width = "0";
+                        searchInputElement.style.paddingLeft = "0";
+                        searchInputElement.style.paddingRight = "0";
+                    }
+                });
             });
         });
     }

app/src/protyle/wysiwyg/keydown.ts

@@ -85,7 +85,7 @@ export const getContentByInlineHTML = (range: Range, cb: (content: string) => vo
 
 export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
     editorElement.addEventListener("keydown", (event: KeyboardEvent & { target: HTMLElement }) => {
-        if (event.target.localName === "protyle-html") {
+        if (event.target.localName === "protyle-html" || event.target.localName === "input") {
             event.stopPropagation();
             return;
         }

app/src/util/addClearButton.ts

@@ -1,12 +1,12 @@
 const update = (inputElement: HTMLInputElement, clearElement: Element, right: number) => {
     if (inputElement.value === "") {
         clearElement.classList.add("fn__none");
-        if (right) {
+        if (typeof right === "number") {
-            inputElement.style.paddingRight = "";
+            inputElement.style.paddingRight = inputElement.dataset.oldPaddingRight;
         }
     } else {
         clearElement.classList.remove("fn__none");
-        if (right) {
+        if (typeof right === "number") {
             inputElement.style.setProperty("padding-right", `${right * 2 + clearElement.clientWidth}px`, "important");
         }
     }
@@ -18,6 +18,7 @@ export const addClearButton = (options: {
     height?: number
     className?: string
 }) => {
+    options.inputElement.dataset.oldPaddingRight = options.inputElement.style.paddingRight;
     options.inputElement.insertAdjacentHTML("afterend",
         `<svg class="${options.className || "b3-form__icon-clear"} ariaLabel" aria-label="${window.siyuan.languages.clear}" style="${options.right ? "right: " + options.right + "px;" : ""}${options.height ? "height:" + options.height + "px" : ""}">
 <use xlink:href="#iconCloseRound"></use></svg>`);