[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() }, ```