小程序 - 带输入搜索的下拉筛选框 - 前端搜索

效果

页面

<view>
	<view>名称</view>
	<view>
	  <input
	    placeholder="请选择"
	    value="{{ selectedName }}"
	    bindinput="bindNameInput"
	    bindfocus="bindNameFocus"
	  />
	</view>
	<image src="./images/more.png"></image>
</view>
<view wx:if="{{ isSearchListShow }}">
	<view
	  wx:for="{{ matchedNameList }}"
	  wx:key="{{ item }}"
	  data-item="{{ item }}"
	  bindtap="bindNameChange"
	>
	  {{ item }}
	</view>
</view>

js

data: {
	names: ['test1', 'test2', 'test3', 'test22'],
    matchedNameList: [],
    isSearchListShow: true,
    selectedName: '',
}
bindNameFocus() {
    this.setData({ isSearchListShow: true });
},
bindNameChange(e) {
	let name = e.currentTarget.dataset.item;
	this.setData({ selectedName: name, isSearchListShow: false });
},
bindNameInput(e) {
	const keyword = e.detail.value.toLowerCase();
	const reg = new RegExp(keyword);
	const matchedNameList = this.data.names.filter(item => reg.test(item.toLowerCase()));
	this.setData({ matchedNameList });
},