小记之移动端搜索选择
1，因业务需要移动端需要带搜索的下拉组件，一开始为了方便使用的Vant-Search作为触发逻辑，获取到搜索值后触发Vant-Picker进行代码展示
但是问题来了这种方式需要多一次触发的逻辑，压力山大啊。很多使用者觉得这样太麻烦了，我不想每次都点击一下搜索，我很忙的靓仔(ง •̀_•́)ง
2，所以在这里为了省略一部分操作，删除了搜索的逻辑改变成通过输入的值变化去调取下拉组件
<van-field v-model="item.Value" placeholder="请输入" :type="item.FormType === 1 ? 'text' : 'number'" :label="item.FieldName" :required=" item.IfRequired" @input="fuzzySearch(item)" /> 复制代码
fuzzySearch(item) { let reg = new RegExp("[\u4E00-\u9FFF]+","g"); if (item.Value && reg.test(item.Value)) { // 中文条件 this.debonce(() => { // 显示picker }, 400) } } 复制代码这样写省略了按钮触发显示的问题，不过多了处理打开picker时机的逻辑。 总得来说有些不符我的代码习惯。
3，结合移动端搜索代码实现搜索逻辑
写组件前面简单的理清了一下逻辑，通过搜索框的值变化去查询本地的list或者远端的搜索
<input type="text" ref="homeSearchInput" v-model="searchText" placeholder="请输入搜索值" @input="searchTextInput" > <div class="searchList" v-show="searchText"> <div class="searchListNavList" v-if="searchList.length !== 0"> <div class="list" v-for="item, index in searchList" :key="'searchList' + index" :class="item[keyObj.value] === navListSelectVal ? 'cur' : ''" @click="changeValue(item, index)"> {{ item[keyObj.name] }} </div> </div> <div class="homeSearchTitle" v-else> 暂无搜索结果 </div> </div> 复制代码searchTextInput() { if (Object.prototype.toString.call(this.list) === '[object Function]') { this.debonce(() => { this.list(this.searchText, this) }, 100) } else { this.searchList = this.list.filter(item => item[this.keyObj.name].indexOf(this.searchText) !== -1) } } 复制代码简单的看貌似没有啥问题了，开开心心的去使用了。♪（＾∀＾●)
use... 等一下不对啊，假设我一个页面有两个以上使用了这个，我这个页面不会更新啊，头疼ε=ε=ε=ε=ε=ε=┌(;￣◇￣)┘ 简单的用watch写下变更吧
watch: { show(newV) { if (this.value !== this.navListSelectVal) { if (Object.prototype.toString.call(this.list) === '[object Function]') { if (this.value) { this.searchText = this.value.value this.list(this.searchText, this) this.navListSelectVal = this.value.id } else { this.searchText = '' } } else { this.searchText = '' let list = this.list.filter(item => {item[this.keyObj.value].indexOf((this.type === 'string' ? this.value : this.value[this.keyObj.value])) !== -1}) if (list.length !== 0) { if (this.type === 'string') { this.navListSelectVal = list[0][this.keyObj.value] this.searchText = list[0][this.keyObj.name] } else { this.navListSelectVal = list[0][this.keyObj.value] this.searchText = list[0] } } } } } }, 复制代码就简单的写了一点处理逻辑，看着貌似没有什么问题页面大体OK了 好了，测试一下没问题上线。
上线发布一天后，小王：我怎么选择了就不能删除了，这不好用啊！加了一个清除的逻辑
closeSearch() { this.fn && this.fn() this.navListSelectVal = '' this.$emit('update:show', false) }, 复制代码第一版本的搜索选择器就先这样了，后面就是看看添加一些效果了，比如把picker选择的逻辑加上，设置选择的type。然后就是多选，多级联动选择 近期可能考虑在这反面设计一下。
作者：用户293875181868
链接：https://juejin.cn/post/7021769544079245349