SearchInput

Enter search

If you need a search input that expands results like Select, use SearchSelect.

Basic Usage

SearchInput

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
const last = ref('')
function onSearch(next: string) {
  last.value = next
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 420px;">
    <TxSearchInput
      v-model="value"
      placeholder="Search anything"
      @search="onSearch"
    />

    <div style="color: var(--tx-text-color-secondary); font-size: 12px;">
      value: {{ value }}
    </div>
    <div style="color: var(--tx-text-color-secondary); font-size: 12px;">
      last search: {{ last }}
    </div>
  </div>
</template>

Remote Search

SearchInput (remote)

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
const loading = ref(false)
const hits = ref<string[]>([])
const open = ref(false)

async function onSearch(q: string) {
  const query = q.trim().toLowerCase()
  loading.value = true
  await new Promise(resolve => setTimeout(resolve, 200))
  hits.value = Array.from({ length: 12 })
    .map((_, i) => `Result ${i + 1}`)
    .filter(s => s.toLowerCase().includes(query))
  loading.value = false
  open.value = true
}

function onPick(h: string) {
  value.value = h
  open.value = false
}
</script>

<template>
  <div style="width: 320px;">
    <TxPopover v-model="open" :offset="6" :close-on-click-outside="true" :reference-full-width="true">
      <template #reference>
        <TxSearchInput
          v-model="value"
          remote
          :search-debounce="250"
          placeholder="Type to remote-search"
          @focus="open = true"
          @search="onSearch"
        />
      </template>

      <TxCard variant="solid" background="glass" shadow="soft" :radius="18" :padding="10">
        <div style="display: flex; flex-direction: column; gap: 8px;">
          <div style="font-size: 12px; color: var(--tx-text-color-secondary, #909399);">
            <span v-if="loading">Loading...</span>
            <span v-else>Hits: {{ hits.length }}</span>
          </div>

          <div style="display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto;">
            <button
              v-for="h in hits"
              :key="h"
              type="button"
              style="text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; cursor: pointer;"
              @click="onPick(h)"
            >
              {{ h }}
            </button>

            <div v-if="!loading && value.trim() && !hits.length" style="color: var(--tx-text-color-secondary, #909399); font-size: 12px; padding: 6px 2px;">
              No results
            </div>
          </div>
        </div>
      </TxCard>
    </TxPopover>
  </div>
</template>

API

TxSearchInput Props

Prop	Type	Default	Description
`modelValue`	`string`	`''`	Input value used by `v-model`.
`placeholder`	`string`	`'Search'`	Placeholder text shown when the input is empty.
`disabled`	`boolean`	`false`	Disables typing, clearing, and remote search emission.
`clearable`	`boolean`	`true`	Shows the clear control when the input has a value.
`remote`	`boolean`	`false`	Emits debounced `search` events while typing.
`searchDebounce`	`number`	`200`	Delay in milliseconds before emitting remote search.

Events

Event	Params	Description
`update:modelValue`	`(v: string)`	Emitted when the input value changes.
`input`	`(v: string)`	Mirrors native input changes with the normalized string value.
`focus`	`(e: FocusEvent)`	Emitted when the inner input receives focus.
`blur`	`(e: FocusEvent)`	Emitted when the inner input loses focus.
`clear`	-	Emitted after the clear control resets the value.
`search`	`(v: string)`	Emitted on Enter, or after debounce when `remote` is enabled.

Expose

Name	Type	Description
`focus()`	`() => void`	Focuses the inner input.
`blur()`	`() => void`	Blurs the inner input.
`clear()`	`() => void`	Clears the current value and emits `clear`.
`setValue(v)`	`(v: string) => void`	Sets the current input value.
`getValue()`	`() => string`	Returns the current input value.