前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序自动完成文本框

微信小程序自动完成文本框

作者头像
李才哥
发布2019-07-10 16:07:08
1.8K0
发布2019-07-10 16:07:08
举报
文章被收录于专栏:李才哥

wxml:部分

代码语言:javascript
复制
<!--index.wxml-->
<view class="textview">
  <text class="text">Tip:输入内容后,下方自动显示匹配的结果,点击结果项自动完成输入</text>
</view>
<!--内容填充部分-->
<view class="position">
  <!--用户输入数据部分-->
  <view class="itemviewShow">
    <input class="textinput" bindinput="bindinput" value="{{inputValue}}" placeholder="请输入内容" />
  </view>
  <!--用户可以选择的数据部分-->
  <scroll-view scroll-y="true" class="scrollview" wx:if="{{bindSource.length!=0}}">
                                   <!--bindSource.length!=0意思是,在数据无意义的情况下,就隐藏了-->
    <view wx:for="{{bindSource}}" wx:for-index="index"  data-src="{{index}}" catchtap="itemtap">
      <view id="{{item}}"   class="itemview">{{item}}</view>
    </view>
  </scroll-view>
</view>
<!--意思是看看可选择的数据,是否处于浮动状态-->
<view>
  试试数据有没浮动过
</view>
wxss部分:
/**index.wxss**/
.textview {
  margin: 5rpx 20rpx 100rpx 20rpx;
}
.text {
  font-size: 45rpx;
}
/*填充样式*/
.position{
  width: 750rpx;
  box-sizing: border-box;
  height: 100rpx;
  line-height: 100rpx;
  position: relative;
}
.itemviewShow{
  width: 100%;
  height: 100%;
}
.textinput {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  margin: 0rpx 20rpx 0rpx 20rpx;
  border-bottom: 1rpx solid #09bb07;
  font-size: 40rpx;
  box-sizing: border-box;
}
.scrollview {
  height: 600%;
  /*height: 300rpx;*/
  position: absolute;
  top: 100rpx;
  left: 0rpx;
  z-index: 1;
}
.itemview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 20rpx 20rpx 20rpx 20rpx;
  border-bottom: 1px solid #b1b1b1;
  background-color: #ffffff;
  height: 100rpx;
  line-height: 100rpx;
  box-sizing: border-box;
}
js部分:
//index.js
Page({
  data: {
    inputValue: '',//点击结果项之后替换到文本框的值
    adapterSource: ["123", "321",
        "1253", "3421", "14523",
        "34521", "14223", "34.21",
        "143623", "4646321", "666",
        "weixin", "WeiXin", "wechat",
        "android", "Android", "ios", "iOS", "java",
        "javascript", "微信小程序", "微信公众号", "微信开发者",
      "微信开发者工具"],//本地匹配源
    bindSource: []//绑定到页面的数据,根据用户输入动态变化
  },
  onLoad: function () {
    //这里可以写请求网络数据的代码,请求服务器的匹配源
  },
  //当键盘输入时,触发input事件
  bindinput: function (e) {
    var prefix = e.detail.value//用户实时输入值
    var newSource = []//匹配的结果
   if(prefix!=''){
     this.data.adapterSource.forEach(function (e) {
         if(e.indexOf(prefix)!=-1){
           newSource.push(e)
         }
     })
   }
   if(newSource.length!=0){
     this.setData({
         bindSource:newSource
     })
   }else {
     this.setData({
         bindSource: []
     })
   }
  },
  itemtap:function (e) {
      let self=this;
      let src=e.currentTarget.dataset.src;
      this.setData({
          // inputValue:e.target.id,
          inputValue:self.data.bindSource[src],
          bindSource:[]
      })
  }
})
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-12-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 李才哥 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档