input的autocomplete效果 ---又是一道腾讯编程题

题目

页面内有一个 input 输入框，实现在数组 arr 查询命中词并和 autocomplete 效果。

效果

忽略圆圈，这是quickTime录屏的side effect。。。

代码

html

 <div id="div1">
    <input type="text" id="input" placeholder="有autocomplete的输入框"/>
    <ul id="ul">
    </ul>
  </div>

css

*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;

}
#div1{
    margin:200px auto;
    position: relative;
}

ul{
    list-style: none;
    margin: 0 auto;
    background-color: #ededed;
    color: #3b200c;
    width: 400px;
    border: none;
}

li{
    cursor: pointer;
}

input{
    display: block;
    margin: 0 auto;
    line-height: 40px;
    height: 40px;
    width: 400px;
    font-size: 20px;
    background-color: #ede387;
    border: none;
}

js

var arr = ['a','apple','abandon','bilibili','beep','before','become','being','highmaintains','by','bye','banana']

input.addEventListener('input', function(event){

    var _value = event.target.value.trim()

    if(_value){

        autoComplete(_value, arr)
    }

    else{

        ul.innerHTML = ''
    }

})


function autoComplete(str, arr){

    var lis = []

    arr.forEach( (word)=>{

        if(word.startsWith(str)){

            lis.push('<li>' + word + '</li>')
        }
    })

    ul.innerHTML = lis.join('')
}

function addToInput(li){

    var _txt = li.innerText

    input.value = _txt
}

ul.addEventListener('click', function(event){

    if(event.target.tagName.toLowerCase() === 'li'){

        addToInput(event.target)
    }
})

思考

之前做过一个前端搜索的，那个还嵌套了两层，所以这个就驾轻熟路啦。

如果数据量比较大的话，可以用一些搜索的算法，比如二分或者基类等。也可以给数组先排个序。

如果对字符串是模糊搜索的话，可以用kmp算法。

这里想的比较简单。就是看首字母。startsWith() 好像是es6 的功能吧。

当然，如果数据量更大的话，通常就交给后端了，前端会调用接口来返回结果。