Van Search

Vant Search Component

Search component for search scenarios with customizable input and action buttons.

When to Invoke

Invoke this skill when:

• User needs to implement a search bar
• User wants to create search functionality with filters
• User needs custom action buttons in search
• User wants to customize search input appearance
• User asks about search events and keyboard interactions

Features

• Flexible Shape: Square or round search bar
• Custom Background: Configurable background color
• Action Button: Optional action button with customizable text
• Input Alignment: Left, center, or right text alignment
• Clear Button: Built-in clear functionality
• Custom Icons: Customizable left and right icons
• Formatter: Input value formatting support
• Form Integration: Works with HTML forms for iOS keyboard optimization

API Reference

Props

Events

Methods

Slots

Usage Examples

Basic Usage

<template>
  <van-search v-model="value" placeholder="Placeholder" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
</script>

Listen to Events

<template>
  <form action="/">
    <van-search
      v-model="value"
      show-action
      placeholder="Placeholder"
      @search="onSearch"
      @cancel="onCancel"
    />
  </form>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const value = ref('')

const => {
  showToast(val)
}

const => {
  showToast('Cancel')
}
</script>

Input Align

<template>
  <van-search v-model="value" input-align="center" placeholder="Placeholder" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
</script>

Disabled State

<template>
  <van-search v-model="value" disabled placeholder="Placeholder" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
</script>

Custom Background Color

<template>
  <van-search
    v-model="value"
    shape="round"
    background="#4fc08d"
    placeholder="Placeholder"
  />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
</script>

Custom Action Button

<template>
  <van-search
    v-model="value"
    show-action
    label="Address"
    placeholder="Placeholder"
    @search="onSearch"
  >
    <template #action>
      <div @click="onClickButton">Search</div>
    </template>
  </van-search>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const value = ref('')

const => {
  showToast(val)
}

const => {
  showToast(value.value)
}
</script>

Search with History

<template>
  <div class="search-page">
    <van-search
      v-model="value"
      show-action
      placeholder="Search products"
      @search="onSearch"
      @cancel="onCancel"
    />
    
    <div v-if="!value && searchHistory.length" class="search-history">
      <div class="history-header">
        <span>Search History</span>
        <van-icon name="delete-o" @click="clearHistory" />
      </div>
      <van-tag 
        v-for="(item, index) in searchHistory" 
        :key="index"
        size="large"
        @click="searchFromHistory(item)"
      >
        {{ item }}
      </van-tag>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const value = ref('')
const searchHistory = ref(['Apple', 'Banana', 'Orange'])

const => {
  if (val && !searchHistory.value.includes(val)) {
    searchHistory.value.unshift(val)
  }
  showToast('Searching: ' + val)
}

const => {
  value.value = ''
}

const clearHistory = () => {
  searchHistory.value = []
  showToast('History cleared')
}

const searchFromHistory = (item) => {
  value.value = item
  onSearch(item)
}
</script>

<style scoped>
.search-page {
  background: #f7f8fa;
  min-height: 100vh;
}

.search-history {
  padding: 16px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  color: #323233;
}

.van-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>

Search with Results

<template>
  <div>
    <van-search
      v-model="value"
      show-action
      placeholder="Search"
      @search="onSearch"
      @cancel="onCancel"
    />
    
    <van-list v-if="showResults">
      <van-cell 
        v-for="item in results" 
        :key="item.id" 
        :title="item.title"
        @click="onSelect(item)"
      />
    </van-list>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
const showResults = ref(false)
const results = ref([])

const => {
  results.value = [
    { id: 1, title: `Result 1 for "${val}"` },
    { id: 2, title: `Result 2 for "${val}"` },
    { id: 3, title: `Result 3 for "${val}"` },
  ]
  showResults.value = true
}

const => {
  value.value = ''
  showResults.value = false
  results.value = []
}

const => {
  console.log('Selected:', item)
}
</script>

Using Methods

<template>
  <div>
    <van-search 
      ref="searchRef"
      v-model="value" 
      placeholder="Placeholder" 
    />
    <van-button @click="focusInput">Focus</van-button>
    <van-button @click="blurInput">Blur</van-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
const searchRef = ref()

const focusInput = () => {
  searchRef.value?.focus()
}

const blurInput = () => {
  searchRef.value?.blur()
}
</script>

Best Practices

1. Form Wrapper: Wrap in <form> for iOS keyboard search button
2. Debounce: Implement debouncing for search-as-you-type
3. Clear History: Provide option to clear search history
4. Loading State: Show loading indicator during search
5. Empty State: Handle empty search results gracefully
6. Keyboard Type: Use appropriate keyboard types for different contexts
7. Autocomplete: Enable autocomplete for better UX
8. Accessibility: Ensure proper labels and ARIA attributes