Issue 383 - Replace account_name text input with autoCompleteInput

components/home/searches/AccountSearch.tsx

@@ -10,7 +10,7 @@ import { Input } from "@/components/ui/input";
 import SearchRanges from "@/components/searchRanges/SearchRanges";
 import OperationTypesDialog from "@/components/OperationTypesDialog";
 import { Button } from "@/components/ui/button";
-
+import AutocompleteInput from "@/components/ui/AutoCompleteInput";
 interface AccountSearchProps {
   startAccountOperationsSearch: (
     accountSearchOperationsProps: Explorer.AccountSearchOperationsProps
@@ -60,15 +60,15 @@ const AccountSearch: React.FC<AccountSearchProps> = ({
   return (
     <>
       <div className="flex flex-col">
-        <Input
-          data-testid="account-name"
+        <AutocompleteInput
+          value={accountName}
+          onChange={setAccountName}
+          placeholder="Account name"
+          inputType="account_name"
           className="w-1/2 bg-theme dark:bg-theme border-0 border-b-2"
-          type="text"
-          value={accountName || ""}
-          onChange={(e) => setAccountName(e.target.value)}
-          placeholder="Account name *"
-          required
-        />
+          required={true}
+          />
+           
       </div>
       <SearchRanges
         rangesProps={searchRanges}

components/home/searches/BlockSearch.tsx

@@ -25,7 +25,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 
 import { trimAccountName } from "@/utils/StringUtils";
-
+import AutocompleteInput from "@/components/ui/AutoCompleteInput";
 interface BlockSearchProps {
   startBlockSearch: (
     blockSearchProps: Explorer.BlockSearchProps
@@ -111,13 +111,12 @@ const BlockSearch: React.FC<BlockSearchProps> = ({
   return (
     <>
       <div className="flex flex-col">
-        <Input
-          className="w-1/2 bg-theme dark:bg-theme border-0 border-b-2"
-          type="text"
+       <AutocompleteInput
+          value={accountName}
+          onChange={setAccountName}
           placeholder="Account name"
-          value={accountName || ""}
-          onChange={(e) => setAccountName(e.target.value)}
-          data-testid="account-name-input"
+          inputType="account_name"
+          className="w-1/2 bg-theme dark:bg-theme border-0 border-b-2"
         />
       </div>
       <SearchRanges

components/home/searches/CommentPermlinkSearch.tsx

@@ -6,7 +6,7 @@ import { SearchRangesResult } from "@/hooks/common/useSearchRanges";
 import { Input } from "@/components/ui/input";
 import SearchRanges from "@/components/searchRanges/SearchRanges";
 import { Button } from "@/components/ui/button";
-
+import AutocompleteInput from "@/components/ui/AutoCompleteInput";
 interface CommentsPermlinkSearchProps {
   startCommentPermlinkSearch: (
     accountSearchOperationsProps: Explorer.CommentPermlinSearchParams
@@ -70,13 +70,12 @@ const CommentsPermlinkSearch: React.FC<CommentsPermlinkSearchProps> = ({
     <>
       <p className="ml-2">Find comments permlinks by account name</p>
       <div className="flex flex-col">
-        <Input
-          data-testid="account-name"
-          className="w-1/2 bg-theme dark:bg-theme border-0 border-b-2"
-          type="text"
+         <AutocompleteInput
           value={accountName}
-          onChange={(e) => setAccountName(e.target.value)}
-          placeholder="Author *"
+          onChange={setAccountName}
+          placeholder="Author"
+          inputType="account_name"
+          className="w-1/2 bg-theme dark:bg-theme border-0 border-b-2"
           required
         />
       </div>

components/home/searches/CommentsSearch.tsx

@@ -15,7 +15,7 @@ import { Input } from "@/components/ui/input";
 import SearchRanges from "@/components/searchRanges/SearchRanges";
 import OperationTypesDialog from "@/components/OperationTypesDialog";
 import { Button } from "@/components/ui/button";
-
+import AutocompleteInput from "@/components/ui/AutoCompleteInput";
 interface CommentsSearchProps {
   startCommentsSearch: (
     accountSearchOperationsProps: Explorer.CommentSearchParams
@@ -98,13 +98,12 @@ const CommentsSearch: React.FC<CommentsSearchProps> = ({
         permlink.
       </p>
       <div className="flex flex-col">
-        <Input
-          data-testid="account-name"
-          className="w-1/2 bg-theme dark:bg-theme border-0 border-b-2"
-          type="text"
+      <AutocompleteInput
           value={accountName}
-          onChange={(e) => setAccountName(e.target.value)}
-          placeholder="Author *"
+          onChange={setAccountName}
+          placeholder="Author"
+          inputType="account_name"
+          className="w-1/2 bg-theme dark:bg-theme border-0 border-b-2"
           required
         />
       </div>