diff --git a/.github/workflows/frontend-ci.yml b/.github/workflows/frontend-ci.yml
index 7c8a1f745..66a213ef9 100644
--- a/.github/workflows/frontend-ci.yml
+++ b/.github/workflows/frontend-ci.yml
@@ -73,6 +73,10 @@ jobs:
       # API server env vars
       DJANGO_SETTINGS_MODULE: dandiapi.settings.development
       DJANGO_DATABASE_URL: postgres://postgres:postgres@localhost:5432/django
+      # Close DB connections per-request so the threaded `runserver` doesn't
+      # accumulate connections under parallel Playwright load and exhaust
+      # Postgres's max_connections ("sorry, too many clients already").
+      DJANGO_CONN_MAX_AGE: "0"
       DJANGO_CELERY_BROKER_URL: amqp://localhost:5672/
       DJANGO_MINIO_STORAGE_URL: http://minioAccessKey:minioSecretKey@localhost:9000/django-storage-testing
       DJANGO_DANDI_WEB_APP_URL: http://localhost:8085
diff --git a/dandiapi/settings/development.py b/dandiapi/settings/development.py
index 9b5ecff75..0376fc789 100644
--- a/dandiapi/settings/development.py
+++ b/dandiapi/settings/development.py
@@ -75,3 +75,14 @@
 
 DANDI_DEV_EMAIL = 'test-dev@example.com'
 DANDI_ADMIN_EMAIL = 'test-admin@example.com'
+
+# `manage.py runserver` spawns a thread per request and, with a long-lived
+# CONN_MAX_AGE (inherited from base settings), holds one Postgres connection per
+# thread for the lifetime of the process. Under parallel load — notably the
+# Playwright E2E suite running with multiple workers — the connection count can
+# climb past Postgres's default `max_connections` ("sorry, too many clients
+# already"). Allow that environment to force per-request connection closing
+# (`DJANGO_CONN_MAX_AGE=0`) so the count stays bounded regardless of test count.
+DATABASES['default']['CONN_MAX_AGE'] = env.float(
+    'DJANGO_CONN_MAX_AGE', default=DATABASES['default']['CONN_MAX_AGE']
+)
diff --git a/e2e/tests/dandisetsPage.spec.ts b/e2e/tests/dandisetsPage.spec.ts
index 6e3085979..913a891bc 100644
--- a/e2e/tests/dandisetsPage.spec.ts
+++ b/e2e/tests/dandisetsPage.spec.ts
@@ -19,6 +19,9 @@ test.describe("dandisets page", async () => {
         // Match a stable substring of the search field's placeholder so this
         // doesn't break when the placeholder copy is tweaked.
         const searchFieldText = "Search Dandisets";
+        // Vuetify puts role="combobox" on the field's wrapper, but the inner
+        // <input> still exposes the textbox role with the placeholder as its
+        // accessible name — so match it as a textbox.
         await page.getByRole('textbox', { name: 'Search Dandisets' }).click();
         await page.keyboard.press("Enter");
         await page.getByRole("button", { name: "󰒓" }).click();
diff --git a/e2e/tests/searchOperators.spec.ts b/e2e/tests/searchOperators.spec.ts
new file mode 100644
index 000000000..8038e95f0
--- /dev/null
+++ b/e2e/tests/searchOperators.spec.ts
@@ -0,0 +1,101 @@
+import { test, expect } from "@playwright/test";
+import { clientUrl, dismissCookieBanner } from "../utils.ts";
+
+// The operator autocomplete dropdown is a pure-frontend feature: the operator
+// list is hardcoded in the component, so these tests don't need any backend
+// data. They exercise the search field on the home page (`/`).
+
+const SEARCH_PLACEHOLDER = /Search Dandisets/;
+
+test.describe("search operator autocomplete", async () => {
+  test("shows the full operator list on focus", async ({ page }) => {
+    await page.goto(clientUrl);
+    await dismissCookieBanner(page);
+
+    const search = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+    await search.click();
+
+    const listbox = page.locator(".operator-suggestions");
+    await expect(listbox).toBeVisible();
+    // Every operator from the help table should be offered.
+    await expect(listbox.getByRole("option")).toHaveCount(10);
+    await expect(listbox.getByText("species:", { exact: true })).toBeVisible();
+    await expect(listbox.getByText("created_after:", { exact: true })).toBeVisible();
+  });
+
+  test("filters operators as you type", async ({ page }) => {
+    await page.goto(clientUrl);
+    await dismissCookieBanner(page);
+
+    const search = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+    await search.click();
+    await search.fill("spe");
+
+    const listbox = page.locator(".operator-suggestions");
+    await expect(listbox.getByRole("option")).toHaveCount(1);
+    await expect(listbox.getByText("species:", { exact: true })).toBeVisible();
+    await expect(listbox.getByText("approach:", { exact: true })).toHaveCount(0);
+  });
+
+  test("inserts the highlighted operator on Enter", async ({ page }) => {
+    await page.goto(clientUrl);
+    await dismissCookieBanner(page);
+
+    const search = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+    await search.click();
+    await search.fill("spe");
+    // The first match auto-highlights while typing a prefix, so Enter inserts
+    // it (rather than submitting the search).
+    await page.keyboard.press("Enter");
+
+    await expect(search).toHaveValue("species:");
+    // Focus stays in the field so the value can be typed straight away.
+    await expect(search).toBeFocused();
+  });
+
+  test("inserts an operator mid-query on the token under the cursor", async ({ page }) => {
+    await page.goto(clientUrl);
+    await dismissCookieBanner(page);
+
+    const search = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+    await search.click();
+    await search.fill("neuropixels appr");
+    await page.keyboard.press("Enter");
+
+    await expect(search).toHaveValue("neuropixels approach:");
+  });
+
+  test("inserts an operator on click", async ({ page }) => {
+    await page.goto(clientUrl);
+    await dismissCookieBanner(page);
+
+    const search = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+    await search.click();
+    await search.fill("file");
+
+    const listbox = page.locator(".operator-suggestions");
+    await listbox.getByText("file_type:", { exact: true }).click();
+
+    await expect(search).toHaveValue("file_type:");
+  });
+
+  test("dismisses the dropdown on Escape and submits on Enter when browsing", async ({ page }) => {
+    await page.goto(clientUrl);
+    await dismissCookieBanner(page);
+
+    const search = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+    await search.click();
+
+    const listbox = page.locator(".operator-suggestions");
+    await expect(listbox).toBeVisible();
+
+    await page.keyboard.press("Escape");
+    await expect(listbox).toBeHidden();
+
+    // With nothing highlighted (browsing the full list), Enter submits the
+    // search and navigates to the search results route.
+    await search.fill("hippocampus");
+    await page.keyboard.press("Enter");
+    await expect(page).toHaveURL(/search=hippocampus/);
+  });
+});
diff --git a/web/src/components/DandisetSearchField.vue b/web/src/components/DandisetSearchField.vue
index 629b80cd2..dfb76a31a 100644
--- a/web/src/components/DandisetSearchField.vue
+++ b/web/src/components/DandisetSearchField.vue
@@ -1,17 +1,25 @@
 <template>
   <v-form
-    style="width: 100%;"
+    class="search-field-form"
     @submit="performSearch"
   >
     <v-text-field
-      :model-value="$route.query.search"
+      v-model="searchText"
       placeholder="Search Dandisets free form or with operators, e.g. try neuropixels species:mouse created_after:2024-01-01"
       variant="outlined"
       hide-details
+      autocomplete="off"
       :density="dense ? 'compact' : undefined"
       bg-color="white"
       color="black"
-      @update:model-value="updateSearch"
+      role="combobox"
+      aria-autocomplete="list"
+      :aria-expanded="showSuggestions"
+      @focus="onFocus"
+      @blur="onBlur"
+      @keydown="onKeydown"
+      @keyup="updateToken"
+      @click="updateToken"
     >
       <template #prepend-inner>
         <v-icon @click="performSearch">
@@ -63,11 +71,53 @@
         </v-menu>
       </template>
     </v-text-field>
+
+    <!-- Operator suggestions, GitHub-style. Teleported to the body so the
+         toolbar's `overflow: hidden` doesn't clip it, and positioned manually
+         beneath the input. Focus stays in the input (mousedown is prevented on
+         the list) so the user can keep typing and use the keyboard to select. -->
+    <Teleport to="body">
+      <v-card
+        v-if="showSuggestions"
+        class="operator-suggestions py-1"
+        :style="dropdownStyle"
+        elevation="6"
+        role="listbox"
+      >
+        <v-list
+          density="compact"
+          class="py-0"
+        >
+          <v-list-item
+            v-for="(op, i) in suggestions"
+            :key="op.key"
+            :active="i === highlightedIndex"
+            role="option"
+            :aria-selected="i === highlightedIndex"
+            @mousedown.prevent
+            @mouseenter="highlightedIndex = i"
+            @click="applyOperator(op)"
+          >
+            <template #title>
+              <code class="operator-key">{{ op.key }}:</code><code
+                v-if="op.example"
+                class="operator-example"
+              >{{ op.example }}</code>
+            </template>
+            <template #subtitle>
+              {{ op.description }}
+            </template>
+          </v-list-item>
+        </v-list>
+      </v-card>
+    </Teleport>
   </v-form>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import {
+  ref, computed, watch, nextTick, onMounted, onUnmounted,
+} from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
 import { useRoute } from 'vue-router';
 import router from '@/router';
@@ -81,7 +131,13 @@ defineProps({
 });
 
 const route = useRoute();
-const currentSearch = ref(route.query.search || '');
+const searchText = ref((route.query.search as string) || '');
+
+// Keep the field in sync when the route's search param changes elsewhere
+// (e.g. navigating to a different search, or clearing it).
+watch(() => route.query.search, (val) => {
+  searchText.value = (val as string) || '';
+});
 
 const operatorHelp = [
   { example: 'created_after:2024-01-01', description: 'Created on or after a date' },
@@ -96,37 +152,194 @@ const operatorHelp = [
   { example: 'file_type:nwb', description: 'Has assets of a file type (nwb, image, text, video)' },
 ];
 
-function updateSearch(search: string) {
-  currentSearch.value = search;
+// The set of operators we suggest, derived from the help table so the two
+// stay in sync. The key is the part before the colon (e.g. `species`) and the
+// example is the part after it (e.g. `2024-01-01`), shown as a format hint.
+const searchOperators = operatorHelp.map((op) => {
+  const colon = op.example.indexOf(':');
+  return {
+    key: op.example.slice(0, colon),
+    example: op.example.slice(colon + 1),
+    description: op.description,
+  };
+});
+
+// --- Autocomplete state ---------------------------------------------------
+
+const inputEl = ref<HTMLInputElement | null>(null);
+const focused = ref(false);
+// Set when the user presses Escape; cleared as soon as they type again.
+const dismissed = ref(false);
+const highlightedIndex = ref(-1);
+// The whitespace-delimited token currently under the cursor.
+const currentToken = ref('');
+
+function getCurrentToken(text: string, cursor: number): { start: number; token: string } {
+  const before = text.slice(0, cursor);
+  const start = before.lastIndexOf(' ') + 1;
+  return { start, token: before.slice(start) };
 }
 
-function performSearch(evt: Event) {
-  evt.preventDefault(); // prevent form submission from refreshing page
+function updateToken() {
+  const el = inputEl.value;
+  const cursor = el ? (el.selectionStart ?? searchText.value.length) : searchText.value.length;
+  currentToken.value = getCurrentToken(searchText.value, cursor).token;
+}
 
-  if (currentSearch.value === route.query.search) {
-    // nothing has changed, do nothing
+// Typing clears an Escape dismissal and re-evaluates the token under the cursor.
+watch(searchText, () => {
+  dismissed.value = false;
+  updateToken();
+});
+
+const suggestions = computed(() => {
+  const token = currentToken.value;
+  // Once the user has typed the colon, they're entering a value, not picking
+  // an operator — stop suggesting.
+  if (token.includes(':')) {
+    return [];
+  }
+  const q = token.toLowerCase();
+  if (!q) {
+    return searchOperators;
+  }
+  return searchOperators.filter((op) => op.key.toLowerCase().includes(q));
+});
+
+// Auto-highlight the first match while the user is actively typing an operator
+// prefix, but highlight nothing when simply browsing the full list (empty
+// token) so that Enter submits the search instead of inserting an operator.
+watch(suggestions, (list) => {
+  highlightedIndex.value = currentToken.value && list.length ? 0 : -1;
+});
+
+const showSuggestions = computed(
+  () => focused.value && !dismissed.value && suggestions.value.length > 0,
+);
+
+// --- Dropdown positioning (teleported, so we place it by hand) -------------
+
+const rect = ref<DOMRect | null>(null);
+function updateRect() {
+  rect.value = inputEl.value?.getBoundingClientRect() ?? null;
+}
+
+const dropdownStyle = computed(() => {
+  if (!rect.value) {
+    return {};
+  }
+  return {
+    position: 'fixed' as const,
+    top: `${rect.value.bottom + 2}px`,
+    left: `${rect.value.left}px`,
+    width: `${rect.value.width}px`,
+    zIndex: 2400,
+  };
+});
+
+onMounted(() => {
+  window.addEventListener('scroll', updateRect, true);
+  window.addEventListener('resize', updateRect);
+});
+onUnmounted(() => {
+  window.removeEventListener('scroll', updateRect, true);
+  window.removeEventListener('resize', updateRect);
+});
+
+// --- Event handlers --------------------------------------------------------
+
+function onFocus(evt: FocusEvent) {
+  focused.value = true;
+  dismissed.value = false;
+  if (evt.target instanceof HTMLInputElement) {
+    inputEl.value = evt.target;
+  }
+  updateToken();
+  updateRect();
+}
+
+function onBlur() {
+  focused.value = false;
+}
+
+function applyOperator(op: { key: string }) {
+  const el = inputEl.value;
+  const cursor = el ? (el.selectionStart ?? searchText.value.length) : searchText.value.length;
+  const { start } = getCurrentToken(searchText.value, cursor);
+  const before = searchText.value.slice(0, start);
+  const after = searchText.value.slice(cursor);
+  const insert = `${op.key}:`;
+  searchText.value = `${before}${insert}${after}`;
+  const newCursor = before.length + insert.length;
+  nextTick(() => {
+    if (el) {
+      el.focus();
+      el.setSelectionRange(newCursor, newCursor);
+      currentToken.value = getCurrentToken(searchText.value, newCursor).token;
+    }
+  });
+}
+
+function onKeydown(evt: KeyboardEvent) {
+  if (evt.target instanceof HTMLInputElement) {
+    inputEl.value = evt.target;
+  }
+  if (!showSuggestions.value) {
     return;
   }
+  const count = suggestions.value.length;
+  if (evt.key === 'ArrowDown') {
+    evt.preventDefault();
+    highlightedIndex.value = (Math.max(highlightedIndex.value, -1) + 1) % count;
+  } else if (evt.key === 'ArrowUp') {
+    evt.preventDefault();
+    highlightedIndex.value = (highlightedIndex.value <= 0 ? count : highlightedIndex.value) - 1;
+  } else if ((evt.key === 'Enter' || evt.key === 'Tab') && highlightedIndex.value >= 0) {
+    // Select the highlighted operator. Preventing default stops the form from
+    // submitting (Enter) or moving focus away (Tab) so typing can continue.
+    evt.preventDefault();
+    applyOperator(suggestions.value[highlightedIndex.value]);
+  } else if (evt.key === 'Escape') {
+    evt.preventDefault();
+    dismissed.value = true;
+  }
+}
+
+function performSearch(evt: Event) {
+  evt.preventDefault(); // prevent form submission from refreshing page
+
   if (route.name !== 'searchDandisets') {
+    // Searching from anywhere else (the home page, a dandiset landing page)
+    // takes the user to the search results page. An empty query is allowed —
+    // it lists all dandisets.
     router.push({
       name: 'searchDandisets',
       query: {
-        search: currentSearch.value,
+        search: searchText.value,
       },
     });
-  } else {
-    router.replace({
-      ...route,
-      query: {
-        ...route.query,
-        search: currentSearch.value,
-      },
-    } as RouteLocationRaw);
+    return;
+  }
+
+  // Already on the search page: only re-run the search if the query actually
+  // changed, so pressing Enter on an unchanged field is a no-op.
+  if (searchText.value === (route.query.search || '')) {
+    return;
   }
+  router.replace({
+    ...route,
+    query: {
+      ...route.query,
+      search: searchText.value,
+    },
+  } as RouteLocationRaw);
 }
 </script>
 
 <style scoped>
+.search-field-form {
+  width: 100%;
+}
 .advanced-search-help {
   /* Sized responsively: wide enough for the longest example without wrapping,
    * but capped so it doesn't fill very wide monitors. */
@@ -138,3 +351,19 @@ function performSearch(evt: Event) {
   white-space: nowrap;
 }
 </style>
+
+<style>
+/* Unscoped: the suggestions card is teleported to <body>, outside this
+ * component's scoped-style boundary. */
+.operator-suggestions {
+  max-height: 320px;
+  overflow-y: auto;
+}
+.operator-suggestions .operator-key {
+  font-weight: 600;
+  color: #4051b5;
+}
+.operator-suggestions .operator-example {
+  color: rgba(0, 0, 0, 0.5);
+}
+</style>