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