- 假设下方数据是我们从接口中获取到的，我们需要通过name来搜索，好我们看下一步。
data: [{ "id": 30, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 29, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 28, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 27, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 26, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 25, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 24, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 23, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 22, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 20, "category_id": 2, "name": "数码家电名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "述数码家电内容描述" }, { "id": 19, "category_id": 2, "name": "数码家电名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "述数码家电内容描述" }, { "id": 18, "category_id": 2, "name": "数码家电名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "述数码家电内容描述" } ],
<template>部分：这是模板部分，用于定义页面的结构和布局。在这里，您定义了一个搜索框组件<u-search>和一个用于显示搜索结果的<view>元素。<u-search>组件：这是一个自定义的搜索框组件，可以在页面上显示一个搜索框。它具有一些属性，例如style、height和class，用于自定义样式，以及placeholder属性，用于设置搜索框的占位符文本。@input事件监听器绑定到search方法，以在用户输入时触发搜索。<view>元素：这是一个 UniApp 中用于布局的视图容器元素。在这里，它用于包装搜索框和搜索结果。
<template> <view> <!-- 搜索框组件 --> <u-search style="" height="70" class="" placeholder="请输入产品关键词" @input="search"></u-search> <!-- 显示搜索结果 --> <view v-for="item in filteredData" :key="item.id"> <!-- 在这里显示您的数据项 --> <text>{{ item.name }}</text> </view> </view> </template>
<script>部分：这是脚本部分，包含了页面的逻辑和数据。在这里，您定义了一个名为data的数据对象，用于存储产品数据、searchKeyword用于保存搜索关键词。接下来，使用computed计算属性定义了filteredData，该属性根据搜索关键词过滤产品数据。methods部分：在这里，您定义了一个名为search的方法，用于更新searchKeyword，以便触发计算属性filteredData的重新计算，从而实现搜索功能。
searchKeyword: '', // 用于保存搜索关键词
computed: { // 使用计算属性来过滤数据 filteredData() { return this.data.filter(item => { // 这里可以根据您的需求定义搜索规则 return item.name.includes(this.searchKeyword); // 这里示例使用名称字段进行搜索 }); }, }, methods: { search(keyword) { // 更新搜索关键词 this.searchKeyword = keyword; }, },
好这样一个搜索就完毕了
下方是页面全部代码cv直接可以查看效果
<template> <view> <!-- 搜索框组件 --> <u-search style="" height="70" class="" placeholder="请输入产品关键词" @input="search"></u-search> <!-- 显示搜索结果 --> <view v-for="item in filteredData" :key="item.id"> <!-- 在这里显示您的数据项 --> <text>{{ item.name }}</text> </view> </view> </template> <script> export default { data() { return { data: [{ "id": 30, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 29, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 28, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 27, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 26, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 25, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 24, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 23, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 22, "category_id": 3, "name": "日常家居名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "内容描述" }, { "id": 20, "category_id": 2, "name": "数码家电名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "述数码家电内容描述" }, { "id": 19, "category_id": 2, "name": "数码家电名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "述数码家电内容描述" }, { "id": 18, "category_id": 2, "name": "数码家电名称", "goods_num": 20, "integral_num": 20, "saleable": 1, "content": "述数码家电内容描述" } ], searchKeyword: '', // 用于保存搜索关键词 }; }, computed: { // 使用计算属性来过滤数据 filteredData() { return this.data.filter(item => { // 这里可以根据您的需求定义搜索规则 return item.name.includes(this.searchKeyword); // 这里示例使用名称字段进行搜索 }); }, }, methods: { search(keyword) { // 更新搜索关键词 this.searchKeyword = keyword; }, }, }; </script> <style> /* 样式可以在这里添加 */ </style>
