小程序
小游戏
企业微信
微信支付
扫描小程序码分享
想实现下拉选择器,除了普通下拉选择,还想带有输入后并高亮选择。这个小程序有组件吗?
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
自己实现了一下:
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) {
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}}
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
自己写啊,也不难
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
自己实现了一下:
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>
自己写啊,也不难