Fixed the autocomplete UI position issue

src/Sass/autoComplete.scss

@@ -1,70 +1,74 @@
 .autocomplete {
-    .autocomplete-option {
-        width: 100%;
-        height: 30px;
-    }   
+  position: relative;
+  .autocomplete-option {
+    width: 100%;
+    height: 30px;
+  }
 
-    .autocomplete-text-input {
-        border: none;
-        width: 100%;
+  .autocomplete-text-input {
+    border: none;
+    width: 100%;
 
-        &:focus {
-            outline: none;
-        }
-
-        &:focus-visible {
-            border: none;
-        }
-
-        &:focus-within {
-            border: none;
-        }
-
-        &:active {
-            border: none;
-        }
+    &:focus {
+      outline: none;
     }
 
-    .autocomplete-options {
-        border: 1px;
-        border-style: solid;
-        border-color: var(--bs-body-tx);
-        border-radius: 5px;
-        background-color: var(--bs-body-bg);
-        position: absolute;
-        max-height: 400px;
-        z-index: 80;
-        padding: 5px;
-        max-height: 350px !important;
-        overflow: auto;
-
-        li {
-            margin: 0;
-            padding: 0px 5px 0px 0px;
-            list-style: none;
-            margin-left: 5px;
-        }
+    &:focus-visible {
+      border: none;
     }
 
-    button {
-        background: none;
-        color: inherit;
-        border: none;
-        padding: 0;
-        font: inherit;
-        cursor: pointer;
-        outline: inherit;
+    &:focus-within {
+      border: none;
     }
 
-    .autocomplete-option:focus {
-        background-color: #f3f3f4;
-    }
-    
-    .autocomplete-option:hover {
-        background-color: #f3f3f3;
+    &:active {
+      border: none;
     }
+  }
 
-    .text-left { 
-        text-align: left; 
+  .autocomplete-options {
+    border: 1px;
+    border-style: solid;
+    border-color: var(--bs-body-tx);
+    border-radius: 5px;
+    background-color: var(--bs-body-bg);
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    max-height: 400px;
+    z-index: 80;
+    padding: 5px;
+    max-height: 350px !important;
+    overflow: auto;
+
+    li {
+      margin: 0;
+      padding: 0px 5px 0px 0px;
+      list-style: none;
+      margin-left: 5px;
     }
-}
+  }
+
+  button {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+  }
+
+  .autocomplete-option:focus {
+    background-color: #f3f3f4;
+  }
+
+  .autocomplete-option:hover {
+    background-color: #f3f3f3;
+  }
+
+  .text-left {
+    text-align: left;
+  }
+}