微信小程序搜索框加跳转

样式如下图
一般情况下

获得焦点时（出现可供搜索列表和取消键）

搜索关键字时（关键字在列表中）

搜索关键字时（关键字不在列表中）

• html

 <!-- 搜索框 -->
  <!-- 一般情况下 -->
  <view class='search' wx:if="{{!focus}}"> 
    <image class='search_icon' src='/icon/search.png' mode='aspectFit'></image>
    <input class='sou_input' type="text" placeholder='请输入关键字' placeholder-class="sou_text" confirm-type="search" bindfocus="focusHandler"/>
  </view>
  <!-- 获得焦点时多一个取消icon -->
  <view class='search' id="asearch" wx:if="{{focus}}"> 
    <image class='search_icon' src='/icon/search.png' mode='aspectFit'></image>
    <input class='sou_input' type="text"  placeholder='请输入关键字' placeholder-class="sou_text" value="{{inputValue}}" confirm-type="search" bindinput='query' />
    <image class='search_cancel' src='/icon/cancel.png' mode="aspectFit" bindtap="cancelHandler"></image>
  </view>
  <!-- 搜索结果显示框 -->
  <scroll-view wx:if="{{focus}}" class="scrollview" scroll-y="true">
    <view wx:for="{{list}}" wx:key="name">
      <view class="scrollItem">
      <text class="font1" space="nbsp">   {{item.name}}</text>
      </view>
    </view>
  </scroll-view>

• css

/* 搜索框 */
.search {
  left: 74rpx;
  top: 16rpx;
  position: absolute;
  display: flex;
  border-radius: 30rpx;
  width: 604rpx;
  height: 60rpx;
  background-color:rgba(255, 255, 255, 0.5);
  align-items: center;
  line-height: 60rpx;
}
#asearch {
  border-radius: 30rpx 30rpx 0rpx 0rpx;
}
.sou_text{
  font-size: 24rpx;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  }
.search_icon {
  width: 36rpx;
  height: 60rpx;
  line-height: 60rpx;
  display: inline-block;
  margin-left: 26rpx;
}
.search_cancel {
  width: 36rpx;
  height: 60rpx;
  display: inline-block;
  margin-left: 180rpx;
  margin-right: 26rpx;
}
.sou_input {
  position: relative;
  width: 300rpx;
  display: inline-block;
  height: 60rpx;
  font-size: 30rpx;
}
/* 搜索框下拉 */
.scrollview {
  position: absolute;
  width: 604rpx;
  height: 240rpx;
  left: 74rpx;
  top: 76rpx;
  border-radius:0rpx 0rpx 30rpx 30rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #ffffff;
  background-color:rgba(255, 255, 255, 0.5);
  line-height: 60rpx;
}
.scrollItem:hover {
  background-color:rgba(255, 255, 255, 0.281);
}

• js代码

data: {
    focus:false, //是否显示取消键
    inputValue:"",
    list: [{'name':'花香型香氛'},{'name':'玫瑰精油'},{'name':'依兰精油'},{'name':'橙花精油'},{'name':'柑橘型香氛'},{'name':'佛手柑精油'},{'name':'葡萄柚精油'},{'name':'柠檬精油'},{'name':'木香型香氛'},{'name':'杉木精油'},{'name':'松木精油'},{'name':'檀香木精油'},{'name':'龙涎香'},{'name':'海狸香'},{'name':'麝香'},{'name':'薰衣草香'},{'name':'鸢尾香'},{'name':'迷迭香'}], //搜索到的结果
    list2: [{'name':'花香型香氛'},{'name':'玫瑰精油'},{'name':'依兰精油'},{'name':'橙花精油'},{'name':'柑橘型香氛'},{'name':'佛手柑精油'},{'name':'葡萄柚精油'},{'name':'柠檬精油'},{'name':'木香型香氛'},{'name':'杉木精油'},{'name':'松木精油'},{'name':'檀香木精油'},{'name':'龙涎香'},{'name':'海狸香'},{'name':'麝香'},{'name':'薰衣草香'},{'name':'鸢尾香'},{'name':'迷迭香'}], //可供查询的记录
  },
  focusHandler (e) {
    this.setData({focus:true});
  },
  cancelHandler (e) {
    this.setData({focus:false})
  },
  query(e){
  
    this.setData({
      inputValue: e.detail.value
  })  //显示输入的字符串
    //实现搜索的功能
    var list = this.data.list2;		//先把第二条json存起来
    var list2 = [];		
    for(var i=0;i<list.length;i++){
      var string = list[i].name;
      //查询json里的name是否包含搜索的关键词，如果有就把他装进list2数组
      if(string.indexOf(e.detail.value) >= 0){
        list2.push(list[i]);
      }
    }
    //循环结束，判断是否查询到关键字，如果没有显示提示语
    if(list2.length == 0){
      list2 = [{'name':'您输入的产品尚未被录入'}]
    }
    //到这里list2是你查出的数据
    //如果输入的关键词为空就加载原来的全部数据，不是空就加载搜索到的数据
    if(e.detail.value == ""){
      //加载全部
      this.setData({
        list: list
      })
    } else {
      this.setData({
        list: list2
      })
    } 
  },