当前位置：首页 > news >正文

uniapp搜索功能

news 2025/7/12 14:23:13

假设下方数据是我们从接口中获取到的，我们需要通过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>

查看全文

http://www.lryc.cn/news/164113.html