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