<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>搜索关键字列表变红</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> ul { padding: 0; list-style: none; } li { width: 200px; height: 25px; margin: 10px; /*background:orange;*/ } </style> </head> <body> <div> <input type="text" placeholder="请输入您要搜索的关键字" id="keyword" oninput="keywordSubmit()"> </div> <div> <ul> <li>您1111</li> <li>您2222</li> <li>人人人人</li> <li>中国年</li> <li>正月十五</li> <li>我爱我家</li> <li>恭喜发财</li> <li>是不是傻</li> </ul> </div> <script> function keywordSubmit() { const keyword = $.trim($("#keyword").val()); $('ul li').each(function () { const text = $(this).text(); if (keyword) { if (new RegExp(keyword.toLowerCase()).test(text.toLowerCase())) { // $(this).show(); // 搜索后改变颜色 $(this).css("background","red"); } else { // $(this).hide(); // 搜索后其他结果改变颜色 $(this).css("background","#fff") } } else { // alert(123) $(this).show(); } }); } </script> </body> </html>
