Uniapp 中搜索功能的实现方法

在 Uniapp 开发中，搜索功能是提升用户体验、方便用户快速找到所需信息的关键部分。下面详细介绍如何在 Uniapp 里实现搜索功能。

搭建搜索框界面。在页面的 template 部分创建一个输入框和一个搜索按钮。输入框用于用户输入搜索关键词，按钮则触发搜索操作。通过设置输入框的 v-model 指令，可以实现数据的双向绑定，方便获取用户输入的值。

<template>
  <view class="search-container">
    <input v-model="searchKey" placeholder="请输入搜索内容" />
    <button @click="searchData">搜索</button>
  </view>
</template>

接着，在 script 部分定义数据和方法。在 data 中定义 searchKey 变量，用于存储用户输入的关键词。searchData 方法则是搜索功能的核心，它会根据用户输入的关键词，在数据源中进行筛选。

<script>
export default {
  data() {
    return {
      searchKey: '',
      dataList: [
        { name: '苹果' },
        { name: '香蕉' },
        { name: '橙子' }
      ],
      resultList: []
    }
  },
  methods: {
    searchData() {
      this.resultList = this.dataList.filter(item => {
        return item.name.indexOf(this.searchKey)!== -1;
      });
    }
  }
}
</script>

上述代码中，filter 方法遍历 dataList 数组，使用 indexOf 方法判断每个元素的 name 属性是否包含搜索关键词。如果包含，则将该元素添加到 resultList 中。

最后，在页面展示搜索结果。在 template 中添加一个列表，循环渲染 resultList 中的数据。

<template>
  <view class="search-container">
    <input v-model="searchKey" placeholder="请输入搜索内容" />
    <button @click="searchData">搜索</button>
    <view class="result-list">
      <view v-for="(item, index) in resultList" :key="index">{{ item.name }}</view>
    </view>
  </view>
</template>

通过以上步骤，一个简单的 Uniapp 搜索功能就实现了。实际应用中，数据源可能来自接口请求，这时候需要在组件的 created 或 mounted 钩子函数中发起请求获取数据。可以对搜索逻辑进行优化，比如添加防抖、模糊匹配等功能，以提升搜索的准确性和性能。