diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index f38e9a1e..fdea5de7 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -1,10 +1,11 @@
 /** @jsxImportSource @emotion/react */
-import { FormHTMLAttributes, useCallback, useEffect, useState } from "react";
+import { FormHTMLAttributes, useCallback, useEffect, useMemo, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
-import { Button, FormGroup, TextField } from "@mui/material";
+import { Autocomplete, Button, FormGroup, TextField, debounce } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import { css, Theme } from "@emotion/react";
 
+import { useAutocompleteSearchQuery } from "../hooks/useAutocompleteSearchQuery";
 import { Network } from "../model/network";
 import { getNetworks } from "../services/networksService";
 
@@ -17,7 +18,7 @@ const formGroupStyle = css`
 `;
 
 const networkSelectStyle = (theme: Theme) => css`
-	flex: 1 0 auto;
+	flex: 0 0 auto;
 
 	border-top-right-radius: 0;
 	border-bottom-right-radius: 0;
@@ -53,6 +54,18 @@ const networkSelectStyle = (theme: Theme) => css`
 	}
 `;
 
+const inputStyle = css`
+	flex: 1 0 auto;
+
+	.MuiOutlinedInput-root {
+		padding: 0 !important;
+
+		.MuiAutocomplete-input {
+			padding: 12px 16px;
+		}
+	}
+`;
+
 const textFieldStyle = css`
 	.MuiInputBase-root {
 		border-radius: 0;
@@ -70,6 +83,25 @@ const textFieldStyle = css`
 	}
 `;
 
+const autocompleteNameStyle = css`
+	flex: 1 1 auto;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding-right: 16px;
+	font-size: 14px;
+`;
+
+const autocompleteTypeStyle = css`
+	margin-left: auto;
+	flex: 0 0 auto;
+	font-size: 12px;
+	opacity: .75;
+	border: solid 1px gray;
+	border-radius: 8px;
+	padding: 0 4px;
+	background-color: rgba(0, 0, 0, .025);
+`;
+
 const buttonStyle = (theme: Theme) => css`
 	border-radius: 8px;
 	border-top-left-radius: 0px;
@@ -99,6 +131,14 @@ const buttonStyle = (theme: Theme) => css`
 	}
 `;
 
+function storeNetworks(networks: Network[]) {
+	localStorage.setItem("networks", JSON.stringify(networks.map(it => it.name)));
+}
+
+function loadNetworks() {
+	return getNetworks(JSON.parse(localStorage.getItem("networks") || "[]"));
+}
+
 export type SearchInputProps = FormHTMLAttributes<HTMLFormElement> & {
 	persist?: boolean;
 	defaultNetworks?: Network[];
@@ -109,13 +149,15 @@ function SearchInput(props: SearchInputProps) {
 
 	const [qs] = useSearchParams();
 
+	const navigate = useNavigate();
+
 	const [networks, setNetworks] = useState<Network[]>(defaultNetworks || getNetworks(qs.getAll("network") || []));
 	const [query, setQuery] = useState<string>(qs.get("query") || "");
+	const [autocompleteQuery, _setAutocompleteQuery] = useState<string>(query || "");
 
-	const navigate = useNavigate();
+	const setAutocompleteQuery = useMemo(() => debounce(_setAutocompleteQuery, 250), []);
 
-	const storeNetworks = (networks: Network[]) => localStorage.setItem("networks", JSON.stringify(networks.map(it => it.name)));
-	const loadNetworks = () => getNetworks(JSON.parse(localStorage.getItem("networks") || "[]"));
+	const autocompleteSuggestions = useAutocompleteSearchQuery(autocompleteQuery, networks);
 
 	const handleNetworkSelect = useCallback((networks: Network[], isUserAction: boolean) => {
 		if (isUserAction && persist) {
@@ -126,6 +168,11 @@ function SearchInput(props: SearchInputProps) {
 		setNetworks(networks);
 	}, [persist]);
 
+	const handleQueryChange = useCallback((ev: any, value: string) => {
+		setQuery(value);
+		setAutocompleteQuery(value);
+	}, []);
+
 	const handleSubmit = useCallback((ev: any) => {
 		ev.preventDefault();
 
@@ -166,13 +213,35 @@ function SearchInput(props: SearchInputProps) {
 					value={networks}
 					multiselect
 				/>
-				<TextField
-					css={textFieldStyle}
-					fullWidth
-					id="search"
-					onChange={(e) => setQuery(e.target.value)}
-					placeholder="Extrinsic hash / account address / block hash / block height / extrinsic name / event name"
-					value={query}
+				<Autocomplete
+					css={inputStyle}
+					freeSolo
+					includeInputInList
+					autoComplete
+					disableClearable
+					options={autocompleteSuggestions.data || []}
+					filterOptions={it => it}
+					inputValue={query}
+					onInputChange={handleQueryChange}
+					renderOption={(props, option) => (
+						<li {...props}>
+							<div css={autocompleteNameStyle}>
+								{option.label.slice(0, option.highlight[0])}
+								<strong>{option.label.slice(option.highlight[0], option.highlight[1])}</strong>
+								{option.label.slice(option.highlight[1])}
+							</div>
+							<div css={autocompleteTypeStyle}>{option.type}</div>
+						</li>
+					)}
+					renderInput={(params) =>
+						<TextField
+							{...params}
+							css={textFieldStyle}
+							fullWidth
+							id="search"
+							placeholder="Extrinsic hash / account address / block hash / block height / extrinsic name / event name"
+						/>
+					}
 				/>
 				<Button
 					css={buttonStyle}
diff --git a/src/hooks/useAutocompleteSearchQuery.ts b/src/hooks/useAutocompleteSearchQuery.ts
new file mode 100644
index 00000000..317b53a2
--- /dev/null
+++ b/src/hooks/useAutocompleteSearchQuery.ts
@@ -0,0 +1,12 @@
+import { Network } from "../model/network";
+import { autocompleteSearchQuery } from "../services/searchService";
+
+import { UseResourceOptions, useResource } from "./useResource";
+
+export function useAutocompleteSearchQuery(
+	query: string,
+	networks: Network[],
+	options?: UseResourceOptions
+) {
+	return useResource(autocompleteSearchQuery, [query, networks], options);
+}
diff --git a/src/model/runtime-metadata/runtimeMetadataAutocomplete.ts b/src/model/runtime-metadata/runtimeMetadataAutocomplete.ts
new file mode 100644
index 00000000..ee6864b0
--- /dev/null
+++ b/src/model/runtime-metadata/runtimeMetadataAutocomplete.ts
@@ -0,0 +1,6 @@
+export interface RuntimeMetadataAutocomplete {
+	type: "pallet" | "call" | "event";
+	name: string;
+	pallet?: string;
+	networks: string[];
+}
diff --git a/src/repositories/runtimeMetadataRepository.ts b/src/repositories/runtimeMetadataRepository.ts
index 6aa6ca5c..f3278d80 100644
--- a/src/repositories/runtimeMetadataRepository.ts
+++ b/src/repositories/runtimeMetadataRepository.ts
@@ -22,12 +22,12 @@ export class RuntimeMetadataRepository extends Dexie {
 
 		this.version(1).stores({
 			specs: "[network+specVersion]",
-			pallets: "[network+specVersion+name],[network+specVersion]",
-			calls: "[network+specVersion+pallet+name],[network+specVersion+pallet]",
-			events: "[network+specVersion+pallet+name],[network+specVersion+pallet]",
+			pallets: "[network+specVersion+name],[network+specVersion],name",
+			calls: "[network+specVersion+pallet+name],[network+specVersion+pallet],name",
+			events: "[network+specVersion+pallet+name],[network+specVersion+pallet],name",
 			constants: "[network+specVersion+pallet+name],[network+specVersion+pallet]",
 			storages: "[network+specVersion+pallet+name],[network+specVersion+pallet]",
-			errors: "[network+specVersion+pallet+name],[network+specVersion+pallet]"
+			errors: "[network+specVersion+pallet+name],[network+specVersion+pallet]",
 		});
 	}
 }
diff --git a/src/screens/home.tsx b/src/screens/home.tsx
index 16f9b763..6738635b 100644
--- a/src/screens/home.tsx
+++ b/src/screens/home.tsx
@@ -109,8 +109,7 @@ const searchInputStyle = (theme: Theme) => css`
 	flex: 1 1 auto;
 
 	.MuiInputBase-root {
-		.MuiInputBase-input,
-		.MuiSelect-select {
+		&.MuiOutlinedInput-root .MuiAutocomplete-input {
 			padding: 16px 24px;
 		}
 	}
diff --git a/src/services/runtimeMetadataService.ts b/src/services/runtimeMetadataService.ts
index 219e63ae..56b5265f 100644
--- a/src/services/runtimeMetadataService.ts
+++ b/src/services/runtimeMetadataService.ts
@@ -1,4 +1,4 @@
-import { Table } from "dexie";
+import { Collection, Table } from "dexie";
 
 import { Network } from "../model/network";
 import { RuntimeMetadataCall } from "../model/runtime-metadata/runtimeMetadataCall";
@@ -16,57 +16,69 @@ import { RuntimeSpecWorker } from "../workers/runtimeSpecWorker";
 
 export async function getRuntimeMetadataPallets(network: string, specVersion: string, filter?: (it: RuntimeMetadataPallet) => boolean) {
 	await loadRuntimeMetadata(network, specVersion);
-	return queryStore(runtimeMetadataRepository.pallets, {network, specVersion}, filter).toArray();
+	return applyFilter(runtimeMetadataRepository.pallets.where({network, specVersion}), filter).toArray();
+}
+
+export async function getRuntimeMetadataPalletsByName(namePrefix: string, filter?: (it: RuntimeMetadataPallet) => boolean) {
+	return applyFilter(runtimeMetadataRepository.pallets.where("name").startsWithIgnoreCase(namePrefix), filter).toArray();
 }
 
 export async function getRuntimeMetadataCalls(network: string, specVersion: string, pallet: string, filter?: (it: RuntimeMetadataCall) => boolean) {
 	await loadRuntimeMetadata(network, specVersion);
-	return queryStore(runtimeMetadataRepository.calls, {network, specVersion, pallet}, filter).toArray();
+	return applyFilter(runtimeMetadataRepository.calls.where({network, specVersion, pallet}), filter).toArray();
+}
+
+export async function getRuntimeMetadataCallsByName(namePrefix: string, filter?: (it: RuntimeMetadataCall) => boolean) {
+	return applyFilter(runtimeMetadataRepository.calls.where("name").startsWithIgnoreCase(namePrefix), filter).toArray();
 }
 
 export async function getRuntimeMetadataEvents(network: string, specVersion: string, pallet: string, filter?: (it: RuntimeMetadataEvent) => boolean) {
 	await loadRuntimeMetadata(network, specVersion);
-	return queryStore(runtimeMetadataRepository.events, {network, specVersion, pallet}, filter).toArray();
+	return applyFilter(runtimeMetadataRepository.events.where({network, specVersion, pallet}), filter).toArray();
+}
+
+export async function getRuntimeMetadataEventsByName(namePrefix: string, filter?: (it: RuntimeMetadataEvent) => boolean) {
+	return applyFilter(runtimeMetadataRepository.events.where("name").startsWithIgnoreCase(namePrefix), filter).toArray();
 }
 
 export async function getRuntimeMetadataConstants(network: string, specVersion: string, pallet: string, filter?: (it: RuntimeMetadataConstant) => boolean) {
 	await loadRuntimeMetadata(network, specVersion);
-	return queryStore(runtimeMetadataRepository.constants, {network, specVersion, pallet}, filter).toArray();
+	return applyFilter(runtimeMetadataRepository.constants.where({network, specVersion, pallet}), filter).toArray();
 }
 
 export async function getRuntimeMetadataStorages(network: string, specVersion: string, pallet: string, filter?: (it: RuntimeMetadataStorage) => boolean) {
 	await loadRuntimeMetadata(network, specVersion);
-	return queryStore(runtimeMetadataRepository.storages, {network, specVersion, pallet}, filter).toArray();
+	return applyFilter(runtimeMetadataRepository.storages.where({network, specVersion, pallet}), filter).toArray();
 }
 
 export async function getRuntimeMetadataErrors(network: string, specVersion: string, pallet: string, filter?: (it: RuntimeMetadataError) => boolean) {
 	await loadRuntimeMetadata(network, specVersion);
-	return queryStore(runtimeMetadataRepository.errors, {network, specVersion, pallet}, filter).toArray();
+	return applyFilter(runtimeMetadataRepository.errors.where({network, specVersion, pallet}), filter).toArray();
 }
 
 export async function getRuntimeMetadataCall(network: string, specVersion: string, pallet: string, name: string) {
 	await loadRuntimeMetadata(network, specVersion);
-	return queryStore(runtimeMetadataRepository.calls, {network, specVersion, pallet, name}).first();
+	return runtimeMetadataRepository.calls.where({network, specVersion, pallet, name}).first();
 }
 
 export async function getRuntimeMetadataEvent(network: string, specVersion: string, pallet: string, name: string) {
 	await loadRuntimeMetadata(network, specVersion);
-	return queryStore(runtimeMetadataRepository.events, {network, specVersion, pallet, name}).first();
+	return runtimeMetadataRepository.events.where({network, specVersion, pallet, name}).first();
 }
 
 export async function getRuntimeMetadataConstant(network: string, specVersion: string, pallet: string, name: string) {
 	await loadRuntimeMetadata(network, specVersion);
-	return queryStore(runtimeMetadataRepository.constants, {network, specVersion, pallet, name}).first();
+	return runtimeMetadataRepository.constants.where({network, specVersion, pallet, name}).first();
 }
 
 export async function getRuntimeMetadataStorage(network: string, specVersion: string, pallet: string, name: string) {
 	await loadRuntimeMetadata(network, specVersion);
-	return queryStore(runtimeMetadataRepository.storages, {network, specVersion, pallet, name}).first();
+	return runtimeMetadataRepository.storages.where({network, specVersion, pallet, name}).first();
 }
 
 export async function getRuntimeMetadataError(network: string, specVersion: string, pallet: string, name: string) {
 	await loadRuntimeMetadata(network, specVersion);
-	return queryStore(runtimeMetadataRepository.errors, {network, specVersion, pallet, name}).first();
+	return runtimeMetadataRepository.errors.where({network, specVersion, pallet, name}).first();
 }
 
 export async function normalizePalletName(network: Network, name: string, specVersion: string) {
@@ -165,9 +177,7 @@ async function loadRuntimeMetadata(network: string, specVersion: string) {
 	});
 }
 
-function queryStore<T>(table: Table<T>, where: Record<string, any>, filter?: (it: T) => boolean) {
-	let collection = table.where(where);
-
+function applyFilter<T>(collection: Collection<T>, filter?: (it: T) => boolean) {
 	if (filter) {
 		collection = collection.filter(filter);
 	}
diff --git a/src/services/searchService.ts b/src/services/searchService.ts
index 186371ea..87a467ee 100644
--- a/src/services/searchService.ts
+++ b/src/services/searchService.ts
@@ -24,13 +24,14 @@ import { NetworkError, NonFatalError } from "../utils/error";
 import { extractConnectionItems, paginationToConnectionCursor } from "../utils/itemsConnection";
 import { emptyItemsResponse } from "../utils/itemsResponse";
 import { PickByType } from "../utils/types";
+import { uniqBy } from "../utils/uniq";
 
 import { BlocksFilter, blocksFilterToArchiveFilter, blocksFilterToExplorerSquidFilter, unifyArchiveBlock, unifyExplorerSquidBlock } from "./blocksService";
 import { addEventsArgs, eventsFilterToExplorerSquidFilter, unifyExplorerSquidEvent } from "./eventsService";
 import { ExtrinsicsFilter, extrinsicFilterToArchiveFilter, extrinsicFilterToExplorerSquidFilter, unifyArchiveExtrinsic, unifyExplorerSquidExtrinsic } from "./extrinsicsService";
 import { fetchArchive, fetchExplorerSquid } from "./fetchService";
 import { getNetwork, hasSupport } from "./networksService";
-import { normalizeCallName, normalizeEventName } from "./runtimeMetadataService";
+import { getRuntimeMetadataCallsByName, getRuntimeMetadataEventsByName, getRuntimeMetadataPalletsByName, normalizeCallName, normalizeEventName } from "./runtimeMetadataService";
 import { getLatestRuntimeSpecVersion } from "./runtimeSpecService";
 
 export type SearchPaginationOptions = Record<keyof PickByType<NetworkSearchResult, ItemsResponse<any, true>>, PaginationOptions>;
@@ -136,6 +137,58 @@ export async function search(query: string, networks: Network[], pagination: Sea
 	};
 }
 
+export async function autocompleteSearchQuery(query: string, networks: Network[]) {
+	if (!query) {
+		return [];
+	}
+
+	const networkNames = networks.map(it => it.name);
+
+	let pallet: string|undefined;
+
+	if (query.includes(".")) {
+		[pallet = "", query = ""] = query.split(".");
+	}
+
+	console.log("autocomplete", pallet, query, networkNames);
+
+	const pallets = await getRuntimeMetadataPalletsByName(query, it => (networkNames.length === 0 || networkNames.includes(it.network)) && !pallet);
+	const calls = await getRuntimeMetadataCallsByName(query, it => (networkNames.length === 0 || networkNames.includes(it.network)) && (!pallet || it.pallet === pallet));
+	const events = await getRuntimeMetadataEventsByName(query, it => (networkNames.length === 0 || networkNames.includes(it.network)) && (!pallet || it.pallet === pallet));
+
+	const palletOptions = uniqBy(pallets, it => it.name).map(it => ({
+		label: it.name,
+		highlight: [0, query.length],
+		type: "pallet"
+	}));
+
+	const callOptions = uniqBy(calls, it => `${it.pallet}.${it.name}`).map(it => ({
+		label: `${it.pallet}.${it.name}`,
+		highlight: [
+			it.pallet.length + 1,
+			it.pallet.length + 1 + query.length
+		],
+		type: "call"
+	}));
+
+	const eventOptions = uniqBy(events, it => `${it.pallet}.${it.name}`).map(it => ({
+		label: `${it.pallet}.${it.name}`,
+		highlight: [
+			it.pallet.length + 1,
+			it.pallet.length + 1 + query.length
+		],
+		type: "event"
+	}));
+
+	return [
+		...palletOptions,
+		...[
+			...callOptions,
+			...eventOptions
+		].sort((a, b) => a.label.toLowerCase().localeCompare(b.label.toLowerCase()))
+	];
+}
+
 export function getQueryType(network: Network, query: string) {
 	if (isHex(query)) {
 		return "hash";
@@ -574,7 +627,10 @@ function networkResultsToSearchResultItems<T extends {id: string, network: Netwo
 	for (const result of networkResults) {
 		const items = result[itemsType];
 
-		if (items.totalCount === 1) {
+		if (items.totalCount === 1 && items.data.length > 0) {
+			// if positive total count found and also some data are fetched
+			// (extrinsics and events by name do not fetch data when searching multiple networks)
+
 			const item = items.data[0] as unknown as T;
 
 			data.push({
@@ -582,11 +638,11 @@ function networkResultsToSearchResultItems<T extends {id: string, network: Netwo
 				network: result.network,
 				data: item,
 			});
-		} else if (items.totalCount > 1) {
+		} else if (items.totalCount >= 1) {
 			data.push({
 				id: `${result.network.name}-grouped`,
 				network: result.network,
-				groupedCount: items.totalCount > 1 ? items.totalCount : undefined
+				groupedCount: items.totalCount
 			});
 		}
 
diff --git a/src/workers/runtimeSpecWorker.runtime.ts b/src/workers/runtimeSpecWorker.runtime.ts
index cfe0094d..fe142584 100644
--- a/src/workers/runtimeSpecWorker.runtime.ts
+++ b/src/workers/runtimeSpecWorker.runtime.ts
@@ -10,6 +10,7 @@ import { fetchArchive } from "../services/fetchService";
 import { WebWorkerRuntime } from "../utils/webWorker";
 
 import { RuntimeSpecWorkerMethods } from "./runtimeSpecWorker";
+import { RuntimeMetadataAutocomplete } from "../model/runtime-metadata/runtimeMetadataAutocomplete";
 
 /**
  * The reason to obtaining runtime metadata in a web worker is
@@ -34,7 +35,6 @@ class RuntimeSpecWorkerRuntime extends WebWorkerRuntime implements RuntimeSpecWo
 		);
 
 		console.log("hex downloaded", network, specVersion);
-		console.log(JSON.stringify(response));
 
 		response.metadata[0] && await this.decodeAndSaveRuntimeMetadata(network, specVersion, response.metadata[0].hex);
 	}
@@ -60,7 +60,7 @@ class RuntimeSpecWorkerRuntime extends WebWorkerRuntime implements RuntimeSpecWo
 			repository.events,
 			repository.constants,
 			repository.storages,
-			repository.errors
+			repository.errors,
 		], async () => {
 			await repository.specs.put({
 				network,