原生JS实现静态数据联想搜索

想必上图中的效果大家一定都见过吧~是不是hin常见!其原理其实也很简单。

搜索框输入字符的时候去和数组里面的每一项数据对比,判断输入框的值是否和数组里每一项的值的开头相同。

判断【输入框的值是否和数组里每一项的值的开头相同】有多种方法,这里我们分享两种比较好理解的方法。

1、使用字符串 slice 方法,slice api

var str = 'string';
str.slice(0, 3); // str

于是,我们有以下的代码

var arr = ['apple', 'banana', 'joanna', 'kevin', 'john'];
var ipt = document.querySelector('#ipt');
ipt.addEventListener('input', function(){
    var tempArr = [];
    var val = this.value;
    var len = val.length;
    arr.forEach(function(o, i ,arr) {
    	if (o.slice(0, len) == val) {
    		tempArr.push(o);
    	}
    });
    console.log(tempArr);
}, false);

2、使用正则匹配,代码如下

var arr = ['apple', 'banana', 'joanna', 'kevin', 'john'];
var ipt = document.querySelector('#ipt');
ipt.addEventListener('input', function(){
    var tempArr = [];
    var val = this.value;
    var reg = new RegExp('^'+val); // 以val开头
    arr.forEach(function(o, i ,arr) {
        if (reg.test(o)) {
            tempArr.push(o);
        }
    });
    console.log(tempArr);
}, false);

以上就是提两种实现方式,个人感觉用正则更容易理解一些~

打赏支持

如果文章对你有帮助就打个赏吧~

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

评论

还没有任何评论,你来说两句吧

发表评论

Powered By Yuuk