如何為VUE中的數據列表實現搜索過濾器？

使用Vue 3的Composition API實現搜索過濾功能，核心是通過v-model綁定搜索輸入和computed屬性動態過濾列表；2. 過濾時採用toLowerCase()實現不區分大小寫和部分匹配；3. 可通過watch監聽搜索詞並結合setTimeout實現300ms防抖，提升性能；4. 若數據來自API，可在onMounted中異步獲取並保持列表響應式；5. 最佳實踐包括使用computed而非方法、保留原始數據、為v-for添加key，以及在無結果時顯示“未找到”提示。該方案簡潔高效，適用於大多數場景。

Implementing a search filter for a list of data in Vue is a common and practical feature. Here's how to do it in a clean and reactive way using Vue 3 (Composition API), though the logic is similar in Vue 2 (Options API).

1. Basic Reactive Search Input with Computed Filtering

The key idea is to use a v-model on the search input and a computed property that filters your list based on the search term.

 <template>
  <div>
    <input
      v-model="searchQuery"
      type="text"
      placeholder="Search items..."
      class="search-input"
    />

    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed } from &#39;vue&#39;

// Sample data
const items = ref([
  { id: 1, name: &#39;Apple&#39; },
  { id: 2, name: &#39;Banana&#39; },
  { id: 3, name: &#39;Cherry&#39; },
  { id: 4, name: &#39;Blueberry&#39; },
  { id: 5, name: &#39;Avocado&#39; }
])

// Reactive search query
const searchQuery = ref(&#39;&#39;)

// Computed property that filters items based on searchQuery
const filteredItems = computed(() => {
  if (!searchQuery.value) return items.value
  return items.value.filter(item =>
    item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})
</script>

2. Case-Insensitive and Partial Matching

The above example already handles case-insensitive matching by converting both the item name and search term to lowercase. This ensures "apple", "Apple", or "APPLE" all match.

You can expand the search to include multiple fields (eg, description , category ) like this:

 const filteredItems = computed(() => {
  if (!searchQuery.value) return items.value

  const query = searchQuery.value.toLowerCase()
  return items.value.filter(item =>
    item.name.toLowerCase().includes(query) ||
    item.description?.toLowerCase().includes(query)
  )
})

Note: Use optional chaining ( ?. ) if some items might not have a description .

3. Debouncing for Performance (Optional)

If your list is large or you're making API calls, you may want to debounce the search input to avoid reactivity overhead on every keystroke.

You can use a library like Lodash ( lodash.debounce ) or implement a simple delay with setTimeout :

 <script setup>
import { ref, watch } from &#39;vue&#39;

const searchQuery = ref(&#39;&#39;)
const debouncedQuery = ref(&#39;&#39;)

// Simulate debounce
let timeout = null
watch(searchQuery, (newVal) => {
  clearTimeout(timeout)
  timeout = setTimeout(() => {
    debouncedQuery.value = newVal
  }, 300) // 300ms delay
})

const filteredItems = computed(() => {
  const query = debouncedQuery.value.toLowerCase()
  if (!query) return items.value
  return items.value.filter(item =>
    item.name.toLowerCase().includes(query)
  )
})
</script>

Now filtering only happens 300ms after the user stops typing.

4. Using with API-Fetched Data

If your data comes from an API, you can still use the same pattern. Just make sure your list is reactive:

 import { ref, computed, onMounted } from 'vue'

const items = ref([])
const searchQuery = ref('')

onMounted(async () => {
  const res = await fetch('/api/items')
  items.value = await res.json()
})

const filteredItems = computed(() => {
  // same filter logic
})

In this case, filtering happens locally after data is loaded.

5. Tips and Best Practices

• Use computed instead of methods for filtering — it's cached and more efficient.
• Keep the original list ( items ) unchanged; always filter from it.
• For large datasets, consider pagination or server-side search.
• Add key to v-for elements (you already did with item.id ).
• Provide feedback (eg, "No results found") when filteredItems.length === 0 .

 <div v-if="filteredItems.length === 0" class="no-results">
  No items match your search.
</div>

That's it. With just a reactive input and a computed filter, you can add powerful search functionality to any list in Vue. It's simple, efficient, and scales well for most use cases.

以上是如何為VUE中的數據列表實現搜索過濾器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！