最后效果图:
话不多说,请看关键代码:
input.addEventListener("input",(e)=>{ //input事件绑定
if(e.target.value){
let reg = new RegExp(e.target.value,"i"); //正则匹配
removeall(); //将列表清空
queryitem(reg,e.target.value);
}
else{
removeall();
}
});
var index;
function queryitem(reg,inputValue){ //模糊查询
for(let i=0;i<li.length;i++){
index=li[i].textContent.search(reg); //使用search得到匹配的索引值
let matchContent="";
if(index>-1){
let content = li[i].textContent.replace(/\u00D7/g,"");
let contentlist = content.split(""); //将匹配到的列表项转换为数组
contentlist.map((item,i)=>{
if(i===index){
matchContent+="