根据符合的检索条件高亮显示

在这里插入图片描述
HTML:

<div id="wrapper">
    <input type="text" id="searchText">
    <ul id="list-wrapper">
    </ul>
</div>

CSS:

*{
     margin: 0;
     padding: 0;
 }

 #wrapper{
     width: 16%;
     margin: 30px auto;
 }

 em{
     color: red;
     font-style: normal;
 }

 #list-wrapper li{
     display: flex;
     justify-content: space-between;
     line-height: 2;
 }

JS:

const listData = [
   {
       name:'小芝麻饼干',
       des:'色香味俱全',
       createTime:'2023-02-16'
   },
   {
       name:'南瓜饼',
       des:'软糯香甜',
       createTime:'2023-02-17'
   },
   {
       name:'南瓜饼干',
       des:'南瓜派甜香酥脆',
       createTime:'2023-02-18'
   }
]
 
function searchKeyword(keyword) {
   const Reg = new RegExp(keyword, 'g');
   $("#list-wrapper").html("");
   let liEle = '';
   listData.forEach(item =>{
       liEle += `<li>
                   <p>${item.name.replace(Reg, `<em>${keyword}</em>`)}</p>
                   <p>${item.des.replace(Reg, `<em>${keyword}</em>`)}</p>
                   <p>${item.createTime}</p>
               </li>`
   })
   $("#list-wrapper").html(liEle)
}

function searchRender(){
   const iptcontent = $("#searchText").val().trim();
   if(iptcontent.length > 0){
       searchKeyword(iptcontent);  
   }
}

$('#searchText').keypress(function (even) {
   if (even.keyCode == 13) {
       searchRender()
   }
})
        
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值