最近在GitHub上找到了一个叫GitHub-Chinese-Top-Charts的项目。 alt 我从这项目中能找到了更多优秀的项目,但是感觉有个不方便使用的地方就是榜单不支持关键词搜索,比如说像搜索spring有关的项目,要通过浏览器关键词搜索才能筛选出来,但是感觉这样使用也不是很方便,于是就想通过以下代码,在每个榜单上方插入一个搜索框,实现关键词筛选。

document.querySelectorAll('article>h2').forEach(h2=>{
    if(h2.innerText=='目录'){
        return
    }
    input=document.createElement('input')
    input.placeholder='请输入关键词'
    input.onkeyup=(event)=>{
        event.target.nextElementSibling.querySelectorAll('tbody>tr').forEach(i => {
            if (i.innerText.toLowerCase().includes(event.target.value)) {
                i.style.display = ''
            } else {
                i.style.display = 'none'
            }
        })
    }
    h2.after(input)
})