小程序搜索页面搜索记录和热门搜索实现

小程序搜索页面,实现搜索记录清除,点击热门搜索词能输入到搜索框,显示搜索记录

wxml页面

<view class='ctn'>
<icon type='search'></icon>
<input value='{
  {input_value}}' bindinput='inputValue'  focus='{
  {name_focus}}'></input>
<text class='cancel' bindtap='searchTap'>{
  {search}}</text>
</view>
<!-- 热门搜索盒子 -->
<view class='hotBox'>
<text class='hotSearch'>热门搜索</text>
<!-- 搜索词盒子 -->
<view class='wid100'>
<!-- 热门搜索词 -->
<button wx:for='{
  {hotKeywords}}' wx:key="{
  {index}}" data-text="{
  {item}}" bindtap='this_value'>{
  {item}}</button>
</view>
</view>
<!-- 搜索记录盒子 -->
&l