Github中文排行榜增加关键词搜索
最近在GitHub上找到了一个叫GitHub-Chinese-Top-Charts的项目。
我从这项目中能找到了更多优秀的项目,但是感觉有个不方便使用的地方就是榜单不支持关键词搜索,比如说像搜索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)
})