[TOC]  > 图上页面应在 组件 attached里发送请求 ## wxml ``` <view class="search"> <input bind:confirm="onConfirm" type="text" placeholder="搜索图书名称" value="{{value}}" bindinput="onInput" /> <icon type="search" size="20" color="#999" class="icon" /> <icon type="clear" size="20" color="#999" class="icon1" bind:tap="onClear" wx:if="{{isClear}}" /> <button bind:tap="onBack">取消</button> </view> ``` ### 1.bindinput 设置 取消按钮的隐藏问题 > 当输入框里的值不为空时 清除按钮出现 `判定为输入框的值是否为空` > 同时因为清除按钮有 onClear事件, 因此触发此事件时 也应设置 清除按钮消失即为false ``` onInput(event) { const value = event.detail.value; console.log(value) if (value) { this.setData({ isClear: true }) } else { this.setData({ isClear: false }) } }, onClear() { this.setData({ value: "", isResult: false, isSearch: false, isClear:false, books: [] }) ``` ## onComfirm事件 设置 点击input搜索 的问题 > 搜索因注意 搜索值`是否为空`,搜索`数据是否存在` ``` onConfirm(event) { wx.showLoading({ title: '数据加载中', }) let value = event.detail.value; //获取搜索到的结果 bookModel.getBookSearch(0, value).then(res => { //如果搜索内容存在 if (res.total) { //将搜索到的值加入到历史搜索 keyword.addHistory(value); //获取历史搜索字段 let words = keyword.getHistory(); this.setData({ words, books: res.books, //判断`历史搜索和热门搜索` 与 搜索结果 的影现 isSearch: true, value: value, // 不显示空搜索结果 isResult: false, //获取 搜索内容 总长度 >为下拉做准备 total: res.total }) } //如果不存在弹出模态框 else { wx.showToast({ title: '抱歉为空', icon: 'none' }) this.setData({ isSearch: true, isResult: true, value }) } }) wx.hideLoading() }, ```