假设下方数据是我们从接口中获取到的,我们需要通过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": "述数码家电内容描述"
- }
- ],
部分:这是模板部分,用于定义页面的结构和布局。在这里,您定义了一个搜索框组件 和一个用于显示搜索结果的 元素。
组件:这是一个自定义的搜索框组件,可以在页面上显示一个搜索框。它具有一些属性,例如 style、height 和 class,用于自定义样式,以及 placeholder 属性,用于设置搜索框的占位符文本。@input 事件监听器绑定到 search 方法,以在用户输入时触发搜索。
元素:这是一个 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>
部分:这是脚本部分,包含了页面的逻辑和数据。在这里,您定义了一个名为 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>