搜索功能（三）-实现关键字搜索功能——封装调用接口方法-携带参数param & v-if为空判断模块消失

实现关键字搜索功能——封装调用接口方法-携带参数param & v-if为空判断模块消失

• 搜索条效果

<div class="search-input">
  <icon type='search' size='16'/>
  <input placeholder="请输入关键字" />
</div>
<button class="cancel">取消</button>

• 搜索结果列表

<div class="search-modal">
  <div class="search-item">
    商品名称
  </div>
</div>

• 清空搜索历史

<div class="history">
  <h4>搜索历史</h4>
  <icon type='clear' size='16'/>
</div>

• 搜索历史关键字列表

<div class="history-list">
  <div class="history-item">
    <navigator :url="'/pages/search_list/main?query=keyword'">
      搜索关键字
    </navigator>
  </div>
</div>

关键字搜索

• 输入关键字，调用后台接口，获取数据，渲染列表

// 事件绑定
// input事件触发的条件：只要有字符变化就触发
// change事件触发的条件：失去焦点时触发
// 如何限制触发频率：函数防抖；函数节流
<input @input='queryData' v-model='keyword' placeholder="请输入关键字" />

// 调用接口
async queryData () {
  // 调用接口需要传递参数
  let res = await request('goods/qsearch', {
    query: this.keyword
  })
  this.list = res.data.message
}

实例：

调用接口携带参数param，重新封装接口数据的调用方法

在src/utils/request.js

/*
  封装通用的后台接口调用方法
*/
export default (path, param) => {
  return new Promise((resolve, reject) => {
    // 发送请求获取接口数据
    let baseUrl = `https://www.zhengzhicheng.cn/api/public/v1/${path}`
    wx.request({
      url: baseUrl,
      data: param,
      success: (res) => {
        if (res.data.meta.status === 200) {
          // this.swiper = res.data.message
          // 获取正常的后台数据
          resolve(res.data.message)
        }
      }
    })
  })
}

给搜索框绑定事件@input='queryData'

<template>
  <div>
    <!-- 顶部搜索栏 -->
    <div class="search">
      <div class="search-content">
        <!-- 输入框 -->
        <div class="search-input">
          <icon type='search' size='16'/>
          <input @input='queryData' v-model='keyword' placeholder="请输入关键字" />
        </div>
        <!-- 取消按钮 -->
        <button class="cancel" v-if='keyword' @click='handleCancel'>取消</button>
        <!-- 搜索的结果 -->
        <div class="search-modal" v-if='keyword'>
          <div :key='item.goods_id' v-for='item in list' class="search-item">
            {{item.goods_name}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

携带参数，调用后台-关键字搜索-接口

<script>
import request from '../../utils/request.js'
export default {
  methods: {
      async queryData () {
         // 根据关键字查询匹配的商品列表
        let res = await request('goods/qsearch', {
        })
        console.log(res)
      },
  }
}
</script>

调用接口

打印关键字搜索结果

静态搜索结果

定义和储存搜索结果，并进行遍历

<template>
  <div>
   <!-- 顶部搜索栏 -->
    <div class="search">
      <div class="search-content">
        <!-- 输入框 -->
        <div class="search-input">
          <icon type='search' size='16'/>
          <input @input='queryData' v-model='keyword' placeholder="请输入关键字" />
        </div>
        <!-- 取消按钮 -->
        <button class="cancel" v-if='keyword' @click='handleCancel'>取消</button>
        <!-- 搜索的结果  进行遍历 且  关键字去除时，搜索结果列表消失-->
        <div class="search-modal" v-if='keyword'>
          <div :key='item.goods_id' v-for='item in list' class="search-item">
            {{item.goods_name}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from '../../utils/request.js'

export default {
  data () {
    return {
      // 搜索关键字
      keyword: '',
      // 搜索的列表结果
      list: [],
    }
  },
  methods: {
      async queryData () {
         // 根据关键字查询匹配的商品列表
        let res = await request('goods/qsearch', {
        })
       // console.log(res)
        //更新搜索列表结果
         this.list = res
      },
  }
}
</script>

关键字搜索效果-动态

注意：

去除搜索关键字时，搜索结果列表应该消失

添加判断v-if='keyword'，完整代码见上