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樣式就不貼了 謝謝大家