jquery+html 前端页面模拟模糊搜索,搜索到的内容高亮展示

包含搜索内容的效果:

没有匹配内容的效果:

html代码:
贴上来这张html是为了让大家看到结构 五条数据为一组

js代码(需要先引入jquery):

<script>
       
        //获取地址栏参数//可以是中文参数
        function getUrlParam(key) {
            // 获取参数
            var url = window.location.search;
            // 正则筛选地址栏
            var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
            // 匹配目标参数
            var result = url.substr(1).match(reg);
            //返回参数值
            return result ? decodeURIComponent(result[2]) : null;
        }
        $(".mainBtn").click(function () {
                var keyword = $.trim($(".mainSearch").val());
                console.log(keyword, "sdsdsd")
                if (keyword) {
                    var url = 'searchDetails.html?name=' + keyword;
                    window.location = url;
                    
                } else {
                    alert("请输入搜索内容")
                }
        });
          $(function () {
                var jsons = [
                    { "name": "中国拆船协会发布会谢德华会长一行来访我会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "哈哈中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "任珑会长一行赴我会理事发布会单位国家能源", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会特许经营发布会专委会第十", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会电子招标采购专业委员会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会2020年行业发布会线上", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "我会任珑会长出席“白鹤滩—江苏特高压工程第一批设备合同签约”", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会特许经营发布会专委会第十", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国拆船协会发布会谢德华会长一行来访我会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会电子招标采购专业委员会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会1999年行业发布会线上", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "我会任珑会长出席“白鹤滩—江苏特高压工程第一批设备合同签约”", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会特许经营发布会专委会第十", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国拆船协会发布会谢德华会长一行来访我会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" },
                    { "name": "中国招标投标协会关于聘任陈琦等六位同志职务的决定发布会", "time": "2021-02-10", "tit": "「新闻中心」" }
                ]
            var value = getUrlParam('name')
            
            $(".mainSearch").val(value)
            if ($(".mainSearch").val()) {
                $(".deletes").css("display", "block !important")
            } else {
                $(".deletes").css("display", "none")
            }
            $(".mainSearch").bind("input propertychange", function (event) {
                if ($(".mainSearch").val()) {
                    $(".deletes").css("display", "block")
                } else {
                    $(".deletes").css("display", "none")
                }
            });
            $(".deletes").click(function () {
                $(".mainSearch").val("")
                $(".deletes").css("display", "none")
            })
            $(".mainSearch").focus(function () {
                if ($(".mainSearch").val()) {
                    $(".deletes").css("display", "block")
                } else {
                    $(".deletes").css("display", "none")
                }
            })
            var getlist = []
              getlist = jsons.filter((item) =>
                  item.name.includes(value)
              )
              if (getlist.length > 0) {
                  console.log("343434")
                  console.log(getlist)
                var str = ''
                  $.each(getlist, function (i, n) {
                      let remainder = i%5
                      if(remainder==0){
                          if(str){
                              str+='</div>'
                          }
                          str += "<div class='association_listbox'>";
                      }
                      var name = n.name.replace(value, "<label>" + value + "</label>");
                      str += "<ul>";
                      str += "<li></li>";
                      str += "<li class='lines'><a href='xhdtDetails.html'>" + n.tit + name + "</a>";
                      str += "</li>";
                      str += "<li>" + n.time + "</li>";
                      str += "</ul>";
                  })
                  str += "</div>";
                  $(".association_list").html(str);

                  $(".association_tits").html(getlist.length)
                  $(".search_words").html(value)


              } else {
                  console.log("123")
                  var str = "<div class='searchNo'>";
                  str += "<img src='../img/searchzw.png'>";
                  str += "<p>暂无信息</p>";
                  str += "</div>";
                  $(".association_list").html(str);
                  $(".association_content").css("height", "380px")
                  $(".association_tits").html("0")
                  $(".search_words").html(value)
              }

            });

    </script>

css样式就不贴了 谢谢大家