小记之移动端搜索选择

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。然后就是多选，多级联动选择 近期可能考虑在这反面设计一下。

未完待续...