diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
index 55493a6f7..f782b31a3 100644
--- a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
@@ -56,7 +56,8 @@ const SEARCH_OPTIONS: SearchOption[] = [
     attributeName: "ancestor",
     attributeType: "relation",
     icon: "bx bx-filter-alt",
-    label: t("search_definition.ancestor")
+    label: t("search_definition.ancestor"),
+    component: AncestorOption
   },
   {
     attributeName: "fastSearch",
@@ -341,8 +342,7 @@ function SearchScriptOption({ note, ...restProps }: SearchOptionProps) {
       <pre>{t("search_script.example_code")}</pre>
       {t("search_script.note")}
     </>}
-    note={note}
-    {...restProps}
+    note={note} {...restProps}
   >
     <NoteAutocomplete
       noteId={searchScript !== "root" ? searchScript ?? undefined : undefined}
@@ -350,4 +350,19 @@ function SearchScriptOption({ note, ...restProps }: SearchOptionProps) {
       placeholder={t("search_script.placeholder")}
     />
   </SearchOption>
+}
+
+function AncestorOption({ note, ...restProps}: SearchOptionProps) {
+  const [ ancestor, setAncestor ] = useNoteRelation(note, "ancestor");
+
+  return <SearchOption
+    title={t("ancestor.label")}    
+    note={note} {...restProps}
+  >
+    <NoteAutocomplete
+      noteId={ancestor !== "root" ? ancestor ?? undefined : undefined}
+      noteIdChanged={noteId => setAncestor(noteId ?? "root")}
+      placeholder={t("ancestor.placeholder")}
+    />
+  </SearchOption>;
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/search_options/ancestor.ts b/apps/client/src/widgets/search_options/ancestor.ts
index fa9fc672e..54a8874c0 100644
--- a/apps/client/src/widgets/search_options/ancestor.ts
+++ b/apps/client/src/widgets/search_options/ancestor.ts
@@ -5,14 +5,7 @@ import { t } from "../../services/i18n.js";
 const TPL = /*html*/`
 <tr>
     <td colspan="2">
-        <div style="display: flex; align-items: center;">
-            <div style="margin-right: 10px">${t("ancestor.label")}:</div>
-            <div class="input-group" style="flex-shrink: 2">
-                <input class="ancestor form-control" placeholder="${t("ancestor.placeholder")}">
-            </div>
-
-            <div style="margin-left: 10px; margin-right: 10px">${t("ancestor.depth_label")}:</div>
-
+        <div style="margin-left: 10px; margin-right: 10px">${t("ancestor.depth_label")}:</div>
             <select name="depth" class="form-select d-inline ancestor-depth" style="flex-shrink: 3">
                 <option value="">${t("ancestor.depth_doesnt_matter")}</option>
                 <option value="eq1">${t("ancestor.depth_eq", { count: 1 })} (${t("ancestor.direct_children")})</option>
@@ -45,16 +38,9 @@ const TPL = /*html*/`
             </select>
         </div>
     </td>
-    <td class="button-column">
-        <span class="bx bx-x icon-action search-option-del"></span>
-    </td>
 </tr>`;
 
 export default class Ancestor extends AbstractSearchOption {
-    static async create(noteId: string) {
-        await AbstractSearchOption.setAttribute(noteId, "relation", "ancestor", "root");
-    }
-
     doRender() {
         const $option = $(TPL);
         const $ancestor = $option.find(".ancestor");