收藏
回答

想实现带输入的下拉选择器,这个小程序有组件吗?

想实现下拉选择器,除了普通下拉选择,还想带有输入后并高亮选择。这个小程序有组件吗?

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

2 个回答

  • 大罗
    大罗
    2022-03-25

    自己实现了一下:

    js:

    Page({

        data: {               

          inputValue: '',//点击结果项之后替换到文本框的值

          adapterSource: ["中国", "美国", "法国", "德国", "泰国","韩国","意大利","澳大利亚","新西兰","马来西亚","新加坡","日本","朝鲜"],//本地匹配源

          bindSource: [],//绑定到页面的数据,根据用户输入动态变化

        },

      

        bindKeyInput: function (e) {

          console.log(e);

           var prefix = e.detail.value//用户实时输入值

            var newSource = []//匹配的结果   

          if(prefix.length != 0)

          {

            this.data.adapterSource.forEach(function (e) {

              if (e.indexOf(prefix) != -1) 

              {

                newSource.push(e)

              }

            });

          }

          

          this.setData({

            bindSource: newSource

          });

        },

      //点击确定

        itemtap: function (e) {    

          this.setData({

            inputValue: e.target.id,

            bindSource: []

          });

        }

    })


    wxml:

    <view>

      <input id='searchInput'  type="text" bindinput="bindKeyInput" value="{{inputValue}}" />

    </view>


    <view class="scrollview">

            <view  wx:for="{{bindSource}}">

                    <view id="{{item}}"  class="itemview" bindtap="itemtap">

                              {{item}}   

                    </view>

            </view>

          </view>

    2022-03-25
    有用
    回复
  • destiny
    destiny
    2022-03-24

    自己写啊,也不难

    2022-03-24
    有用
    回复 2
    • 大罗
      大罗
      发表于移动端
      2022-03-24
      有参考代码吗?
      2022-03-24
      回复
    • destiny
      destiny
      2022-03-24回复大罗
      无非就是 输入框聚焦/失焦,css定位,正则替换,富文本解析
      2022-03-24
      回复
登录 后发表内容