小程序篇1-1：搜索框输入关键字、词检索；点击取消恢复默认状态

当光标点击搜索框输入（后台数据）关键字时，点击输入框后面的×恢复初始状态。
代码如下
wxml：

<!-- 搜索框页面 --><view class='search'><!-- 头部搜索框 --><view class='frame'><input type='text' placeholder='搜索' placeholder-class='holder' bindblur='searchWells' id='search' value='{{name}}' ></input><view class='btn' bindtap="resetSearch"><image src='../../../../../images/icon/cancel.png'></image></view></view><!-- 关键词检索提示 --><block wx:if="{{result.length > 0}}"><block wx:for="{{result}}" wx:key="key"><view class="item"><image src='../../../../../images/icon/ss.png' class='soso'></image><view class="name">{{item}}</view></view></block></block>

wxss：

/* 搜索框 */.search{width: 100%;height: 600px;padding: 0px;margin: 0px;font-family: "Microsoft YaHei";
}.frame{width: 95%;height: 30px;position: relative;background: #eeeeee;margin: 0px auto;border-radius: 5px;
}.frame input{width: 80%;height: 100%;
}.holder{color: #999;font-size: 13px;margin-left: 10px;}
.btn{width: 20px;height: 20px;position: absolute;top: 6px;right: 10px;
}
.btn image{width: 100%;height: 100%;
}/* 关键词检索提示 */.item{width: 100%;padding-left: 10px;padding-right: 10px;font-size: 15px;padding-top: 10px;display: flex;flex-direction: row;
}
.name{margin-bottom: 10px;width: 80%;margin-left: 10px;
}
.soso{width: 20px;height: 20px;
}

js：

Page({/*** 页面的初始数据*/data: {result: [],name: ''},loadGoods: function () { //输入关键字检索提示var hints = ['小', '小耳朵', '小手心', '小温暖', '小小']; //数组return hints;},searchWells: function (e) {var name = e.detail.value;var val = this.loadGoods(); //定义一个变量名var result = new Array();if (name != '') {   //判断用户输入搜素不为空时执行下面的代码for (var i = 0; i < val.length; i++) {var good = val[i];if (good.indexOf(name) > -1) {result.push(good);}}}this.setData({ result: result });},//当用户输入字符后点击恢复默认状态resetSearch: function () {var result = new Array();this.setData({ result: result, name: '' });}})

小程序篇1-1：搜索框输入关键字、词检索；点击取消恢复默认状态相关推荐

selenium定位百度搜索框输入关键字后，下拉框联想出来的怎么定位
百度搜索框输入关键字后,下拉框联想出来的怎么定位? 百度下拉框联想出来的我们按F12中的箭头时,下拉框会消失收回去的. 这个时候怎么办呢解决办法: 就三个步骤 1.在百度搜索框输入关键字" ...
小程序安全设置-弹出框输入获取值
小程序安全设置 Page({/*** 页面的初始数据*/data: {anquan: '',detailanquan: '',hiddenmodalput: true,//可以通过hidden是否掩藏 ...
微信小程序--自定义组件之搜索框
组件:搜索框功能:根据输入框输入值进行模糊查询并在下方滑动框中显示功能图: component.wxml   &l ...
微信小程序自定义标题栏（搜索框）
(小白学习笔记) 1.首先在需要更改页面的json文件中加入"navigationStyle":"custom" 与"usingComponents& ...
BrandExample.Criteria方法实现搜索框输入关键字模糊查询
1.前端: 搜索框: <div class="has-feedback">关键字查询:<input ng-model="searchEntity.nam ...
uniapp开发小程序map上添加搜索框
用到的组件:map,input,cover-image,cover-view 组件说明:map组件是通过原生控件实现,原生组件层级高于前端组件,需要用到cover-view,cover-image能正 ...
微信小程序+vue+taro：搜索框
需求:获取输入框的值完整代码 <template><view><view class="join"><view class=" ...
微信小程序标题栏放logo 搜索框
效果图如下: 如果做成这样,标题栏上面放置自己的logo,绝对逼格满满,话不多说看操作: 第一步:选择你想要放置logo的页面,例如,index页面,找到此页面的json子页面,放置代码: {&quo ...
【uniapp小程序】—— 配置首页搜索框
面试专栏分享,感觉有用的小伙伴可以点个订阅,不定时更新相关面试题:面试专栏 . 文章目录

小程序篇1-1：搜索框输入关键字、词检索；点击取消恢复默认状态

小程序篇1-1：搜索框输入关键字、词检索；点击取消恢复默认状态相关推荐

最新文章

热门文章