diff --git a/App/Views/blog/index.html b/App/Views/blog/index.html
index 55b1a13..6b245b3 100644
--- a/App/Views/blog/index.html
+++ b/App/Views/blog/index.html
@@ -20,7 +20,7 @@
                 代码工具
             </a>
         </li>
-        <li style="margin-top: 12px;">文章搜索</li>
+        <li style="margin-top: 12px;">标题搜索</li>
         <li style="margin-top: 12px" id="search">
             <form style="margin-left: 5px;">
                 <select id="editable-select" style="width: 300px; height: 30px;margin-top: -10px;color: black; " >
@@ -30,29 +30,24 @@
                 </select>
             </form>
         </li>
-        <li style="margin-top: 12px;">内容搜索</li>
-        <li style="margin-top: 12px" id="search">
+        <li style="margin-top: 12px;margin-left: 5px;">内容搜索</li>
+
+        <li style="margin-top: 10px" id="search">
             <script type="text/javascript">
                 function content_change(){
                     console.log($("#term").val())
-                    $.ajax({
-                        type:"post",
-                        url:"{{openapi}}api/doc_search_term",
-                        contentType: "application/json",
-                        async: false,
-                        data :JSON.stringify({
-                            term:$("#term").val()
-                        }),
-                        success: function(result) {
-                            console.log(result)
-                        },
-                        dataType:"json"
-                    },
-                    );
+                 
                 }
             </script>
-            <form style="margin-left: 5px;" oninput="content_change()">
-                <input type="text" id="term" >
+            <form style="margin-left: 5px;" ">
+                <input type="text" id="term" onkeyup="getMoreContents()" onfocus="getMoreContents()" onblur="clearContent()" style="width: 300px;"> 
+                <div id="popDiv"  style="position: absolute; z-index: 3;">
+                    <table id="content_table" bgcolor="#FFFAFA" border="0"
+                        cellspacing="0" cellpadding="0" >
+                        <tbody id="content_table_body" >
+                        </tbody>
+                    </table>
+                </div>
             </form>
         </li>
     </ul>
@@ -71,9 +66,7 @@
     <div class="tab-pane fade  " id="tools">
         {% include '/blog/template/tools.html' %}
     </div>
-<audio   id="audio" controls="controls"  autoplay="autoplay" style="position: fixed; bottom: 10px;right: 10px">
-    <source src="https://testingcloud.club/Baby.mp3" type="audio/mp3" />
-</audio>
+
 <script src="/api/App/Views/blog/js/bootstrap-treeview.js"></script>
 <script type="text/javascript">
     globalposx = 0;
@@ -153,7 +146,6 @@
             }
         });
     }
-
     function startRequest()
     {
         if(globalposx > 250){
@@ -162,8 +154,6 @@
            }
     $(document).ready(
         function () {
-
-
             var devicePixelRatio = window.devicePixelRatio || 1;
             dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
             dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;
@@ -214,7 +204,79 @@
         }
         globalposx  = e.pageX;
     });
+    function getMoreContents() {
+        var keyword = document.getElementById("term").value;
+        if (keyword == "") {
+            clearContent();
+            return;
+        } else {
+            clearContent();
+                $.ajax({
+                    type:"post",
+                    url:"{{openapi}}api/doc_match_search_hightlight",
+                    contentType: "application/json",
+                    async: false,
+                    data :JSON.stringify({
+                        term:$("#term").val()
+                    }),
+                    success: function(result) {
+                        let i = (result.Data.length)
+                        if(i > 0){
+                            while((i--) > 0){
+                            insertContent(JSON.stringify(result.Data[i].highlight[1]))
+                        }
+                        }
+                    },
+                    dataType:"json"
+                },
+            );
+        }
+    }
+    function insertContent(content) {
+        setLocation();
+        var tr = document.createElement("tr");
+        var td = document.createElement("td");
+        td.setAttribute("bgcolor", "#FFFAFA");
+        td.setAttribute("border", "0");
+        td.onmouseover = function() {
+            this.className = 'mouseOver';
+        };
+        td.onmouseout = function() {
+            this.className = 'mouseOut';
+        };
+        td.onclick = function() {
+            // document.getElementById("keyword").value=this.;
+        };
+        div = document.createElement('div');
+        div.innerHTML = ("<a>" + content + "</a>");
+        
+        td.appendChild(div);
+        tr.appendChild(td);
+        document.getElementById("content_table_body").appendChild(tr);
+    }
 
+    function clearContent() {
+        var popNode = document.getElementById("popDiv");
+        popNode.style.border = "none";
+        var contentNode = document.getElementById("content_table_body");
+        var len = contentNode.childNodes.length;
+        for (var i = len - 1; i >= 0; i--) {
+            contentNode.removeChild(contentNode.childNodes[i]);
+        }
+    }
+    function setLocation(){
+        var inputNode = document.getElementById("term");
+        var width = inputNode.offsetWidth;
+        var left = inputNode["offsetLeft"];
+        var top = inputNode.offsetHeight+inputNode["offsetTop"];
+        var popNode = document.getElementById("popDiv");
+        popNode.style.border = "gray 0.5px solid";
+        popNode.style.width = width+"px";
+        popNode.style.top = top+"px";
+        popNode.style.left = left+"px";
+        document.getElementById("content_table").style.width=width+"px";
+
+    }
 </script>
 
 </div>
diff --git a/App/Views/blog/template/head/head_index.html b/App/Views/blog/template/head/head_index.html
index d011868..296f728 100644
--- a/App/Views/blog/template/head/head_index.html
+++ b/App/Views/blog/template/head/head_index.html
@@ -1,3 +1,11 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-01-29 19:52:15
+ * @LastEditTime: 2021-08-07 00:59:22
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \api\App\Views\blog\template\head\head_index.html
+-->
 {% block head %}
 <head>
     <title>{{ title }}</title>
@@ -10,11 +18,23 @@
     <script src="/api/App/Views/blog/js//jquery-editable-select.min.js"></script>
     <script src="/api/App/Views/blog/js//bootstrap-treeview.min.js"></script>
     <link href="/api/App/Views/blog/css/jquery-editable-select.min.css" rel="stylesheet">
+    
     <script type="text/css">
         #doc_toc > ul{
             margin-left: -30px;
             color: black;
         }
     </script>
+    <style>
+        .mouseOver{
+            background-color: #708090;
+            color:#FFFAFA;
+        }
+
+        .mouseOut{
+            background-color: #FFFAFA;
+            color:#000000;
+        }
+    </style>
 </head>
 {% endblock %}