收藏
回答

input组件搜索文本替换的bug

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug input 客户端 7.0.2 2.6.2

请打开代码片段


在input组件中搜索数字1,之后查看console中输出的myData的数据;


得到的输出结果跟data中初始的结果数据不一样;


我在js中并未有函数去修改maData的数据,但是得到的输出结果却被replace函数修改了;

请帮忙看看问题出现在哪,谢谢



这是初始data中的数据:


Page({

data: {

myData: [{

num: "123123123",

}, {

num: "1233123123",

}, {

num: "1231234123",

}, {

num: "134234123123",

}, {

num: "152423123",

}, ],

},


这是搜索后输出的数据:



回答关注问题邀请回答
收藏

2 个回答

  • 拾忆
    拾忆
    2019-03-16
    得看搜索的代码是怎么写的
    2019-03-16
    有用
    回复 10
    • 阿杰瑞米_Jeremy
      阿杰瑞米_Jeremy
      2019-03-16

      我在代码里写了,搜索结果是在一个新的数组中,但是原数组myData不能被修改啊,麻烦你帮忙看看我写的代码片段,很简短的,帮我看看这个逻辑哪里错了,为什么原始data会被修改

      2019-03-16
      回复
    • 拾忆
      拾忆
      2019-03-16回复阿杰瑞米_Jeremy
      😂没在电脑前看不了代码片段
      2019-03-16
      回复
    • 阿杰瑞米_Jeremy
      阿杰瑞米_Jeremy
      2019-03-16回复拾忆

      <!-- wxml  -->

      <text>input组件搜索文本替换的bug:


      请在下方input组件中搜索数字1,之后查看console中输出的myData的数据;


      得到的输出结果跟data中初始的结果数据不一样;


      我在js中并未有函数去修改maData的数据,但是得到的输出结果却被replace函数修改了;

      请帮忙看看问题出现在哪,谢谢

      </text>

      <input type="text" style='border:1rpx solid #000;' placeholder="搜索数字1" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />




      // js


      Page({

      data: {

      myData: [{

      num: "123123123",

      }, {

      num: "1233123123",

      }, {

      num: "1231234123",

      }, {

      num: "134234123123",

      }, {

      num: "152423123",

      }, ],


      },

      onLoad: function() {

      var that = this;

      console.log("输出运行onload后的that.data.myData", that.data.myData)

      },


      // 边输入边搜索

      inputTyping: function(e) {

      var that = this;

      var inputVal = e.detail.value


      that.setData({

      inputVal: e.detail.value,

      searchResult: [],

      })

      console.log("输出运行搜索后的that.data.myData", that.data.myData)


      that.getSearchResult(inputVal)

      },


      getSearchResult: function(inputVal) {

      var that = this;

      var myData = that.data.myData


      for (let i in myData) {

      if (myData[i].num.indexOf(inputVal) >= 0) {

      that.data.searchResult.push(myData[i])

      }

      }

      // 延迟运行替换搜索文字的颜色的函数

      setTimeout(function() {

      that.replace()

      }, 100)

      },



      // 替换搜索文字的颜色

      replace: function() {

      var that = this;


      for (var i = 0; i < that.data.searchResult.length; i++) {


      var num = that.data.searchResult[i].num.replace(that.data.inputVal, "<span style='color:#1aad19'>" + that.data.inputVal + "</span>")


      that.data.searchResult[i].num = num

      }

      },


      })





      2019-03-16
      回复
    • 阿杰瑞米_Jeremy
      阿杰瑞米_Jeremy
      2019-03-16回复拾忆

      搜索“1”之后得到如下截图:

      2019-03-16
      回复
    • 拾忆
      拾忆
      2019-03-16回复阿杰瑞米_Jeremy
      灵异事件,看不出问题在哪里😂😂😂
      2019-03-16
      1
      回复
    查看更多(5)
  • 阿杰瑞米_Jeremy
    阿杰瑞米_Jeremy
    2019-03-16

    求助求助!

    2019-03-16
    有用
    回复
登录 后发表内容