增加搜索功能

Mini.Web/Areas/Admin/Views/OutHHuser/MessageDetial.cshtml

@@ -360,6 +360,9 @@
     <div class="layui-inline" style="padding-top:5px;"> <input type="text" placeholder="yyyy-MM" autocomplete="off" class="layui-input  test-item" id="stime" style="height:28px;width:100px;" value="@Html.Raw(DateTime.Now.AddDays(-30).ToString("yyy-MM-dd"))"></div>
     <div class="layui-inline" style="padding-top:5px;">至</div>
     <div class="layui-inline" style="padding-top:5px;"> <input type="text" placeholder="yyyy-MM" autocomplete="off" class="layui-input  test-item" id="etime" style="height:28px;width:100px;" value="@Html.Raw(DateTime.Now.ToString("yyy-MM-dd"))"></div>
+    <div class="layui-inline" style="padding-top:5px;">
+        <input style="height: 26px;padding-left: 16px;" placeholder="请输入搜索关键词" onchange="searchChat(this.value)" />
+    </div>
     <div class="layui-inline" style="padding-top:5px;">
         <button type="button" class="layui-btn layui-btn-sm layui-btn-ok" onclick="ShowDateMsg()">确定</button>
     </div>
@@ -384,8 +387,38 @@
     .hiddenBtn {
         display: none;
     }
+
+    .highlighted {
+        background-color: #FF5722;
+    }
 </style>
 <script>
+    var searchText="";
+    function searchChat(value) {
+           searchText = value;
+    }
+    function highlightTextInElement(elementId, searchText) {
+           if (searchText == "" || searchText == null) return;
+           const element = document.getElementById(elementId);
+           const nodesToUpdate = [];
+
+           findMatchingNodes(element, searchText, nodesToUpdate);
+
+           nodesToUpdate.forEach(node => {
+               const updatedInnerHTML = node.innerHTML.replace(new RegExp(searchText, 'gi'), '<span class="highlighted">$&</span>');
+               node.innerHTML = updatedInnerHTML;
+           });
+     }
+
+    function findMatchingNodes(node, searchText, nodesToUpdate) {
+           if (node.nodeType === Node.TEXT_NODE && new RegExp(searchText, 'gi').test(node.nodeValue)) {
+               nodesToUpdate.push(node.parentNode);
+           } else if (node.nodeType === Node.ELEMENT_NODE) {
+               for (let i = 0; i < node.childNodes.length; i++) {
+                   findMatchingNodes(node.childNodes[i], searchText, nodesToUpdate);
+               }
+           }
+    }
     var locationJson =@Html.Raw(ViewBag.locationJson);
     if (locationJson["NeedLocaltion"] == 1) {
         if (locationJson.stime) {
@@ -678,6 +711,8 @@
     var loadingindex;
     function ShowDateMsg() {
         ShowMessage(cs_username);
+        // 高亮搜索关键词
+        highlightTextInElement('mycontent1', searchText);
     }
     var messagecount = 0;
     var recordcount = 0;
@@ -786,6 +821,25 @@
                 if (isDaoXu == "1") {
                     paixu = true;
                 }
+                 // 根据搜索关键词过滤聊天记录
+               json = json.filter(j => {
+                   if (searchText == "" || searchText == null) return true;
+                   if (j.msgtype == "text") {
+                       if (j.content.indexOf(searchText) > -1) {
+                           return true;
+                       }
+                   } else if (j.msgtype == "link") {
+                       try {
+                           if (j.link && j.link.title && j.link.title.indexOf(searchText) > -1) {
+                               return true;
+                           }
+                       }
+                       catch (err) {
+                           console.log(err);
+                       }
+                   }
+                   return false
+               })
                 json.sort(sortBy('msgtime', paixu, String));
                 if (json.length > 0) {
                     $("#" + tabName).find("#nomessage").remove();