前端模糊搜索,如何实现从头开始检索?

如图,我想要实现下面的效果
image.png

如何限定只从头部开始搜索呢?

我现在使用的search直接进行搜索匹配,会出现下面的情况

image.png

可是我希望限定只从头部开始搜索,应该如何优化修改代码?

let arr = []    // 搜索结果列表
if (this.isNumStart) { // 股票代码搜索
  this.searchDataStk.map(item => {
    if (item.code.search(this.inputVal) != -1) { arr.push(item) }
  })
}

回答:

两个方法,当然看你的情形直接用第二种方法得了:
正则表达式 /^abc/表示匹配abc开头的串。

let reg = new RegExp(`^${this.inputVal}`)
if (item.code.search(reg) != -1) { arr.push(item) }

字符串startsWith判断是否以某个串开头。

'123'.startsWith('a') // false

回答:

上面已经有答案了,如果没有使用构建工具的话可以自己编辑一个函数来做这件事
function startWith(string,key){
    let stringTrim = string.trim();
    let index = 0;
    for(let i=0;i<key.length;i++){
        if(stringTrim[i] !== key[i]){
            return false;
        }
    }
    return true;
}

let arr = []    // 搜索结果列表
if (this.isNumStart) { // 股票代码搜索
   arr = this.searchDataStk.filter(item => {
     return startWith(item.code,this.inputVal)
  })
}

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注