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

实现关键词高亮的搜索与数据列表动态更新

最新推荐文章于 2025-12-05 07:37:55 发布

原创最新推荐文章于 2025-12-05 07:37:55 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

这篇文章展示了如何使用HTML构建一个简单的输入框和列表容器，通过CSS设置样式，以及JavaScript处理搜索关键字，动态地在列表中高亮显示匹配项并更新内容。示例代码包括了数据结构和事件监听，实现了基于用户输入的实时搜索功能。

在这里插入图片描述
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()
   }
})