Improve search

docs/_static/js/search.js

@@ -2,7 +2,6 @@ $(document).ready(function () {
     var searchForm = $("#search-input-wrap").children("form").first();
     searchForm.append('<div class="form-group searchBtn"><input type="submit" class="form-control" value="Go"></div>');
     searchForm.children("div").first().addClass("searchBox");
-    searchForm.children("div").first().children("input").first().attr("placeholder", "Search")
 
     $('#searchIcon').click(function () {
         if($('#search-input-wrap').is(':hidden')) {

docs/_static/mxnet-theme/layout.html

@@ -14,9 +14,9 @@
 {%- endif %}
 
 {%- macro searchform(classes, button) %}
-<form class="{{classes}}" role="search" action="{{ pathto('search') }}" method="get">
+<form class="{{classes}}" role="search" action="{{ pathto('search') }}" method="get" autocomplete="off">
   <div class="form-group">
-    <input type="text" name="q" class="form-control" {{ 'placeholder="Search"' if not button }} >
+    <input type="text" name="q" class="form-control" placeholder="Search">
   </div>
   <input type="hidden" name="check_keywords" value="yes" />
   <input type="hidden" name="area" value="default" />
@@ -58,13 +58,12 @@
     </script>
 
     <script type="text/javascript" src="{{ pathto('_static/jquery-1.11.1.js', 1) }}"></script>
-
-    {% for name in ['underscore.js', 'searchtools.js', 'doctools.js', 'selectlang.js'] %}
+    {% for name in ['underscore.js', 'searchtools_custom.js', 'doctools.js', 'selectlang.js'] %}
     <script type="text/javascript" src="{{ pathto('_static/' + name, 1) }}"></script>
     {% endfor %}
 
     <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
-    <script type="text/javascript"> jQuery(function() { Search.loadIndex("searchindex.js"); Search.init();}); </script>
+    <script type="text/javascript"> jQuery(function() { Search.loadIndex("{{ pathto('/searchindex.js', 1) }}"); Search.init();}); </script>
 
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

docs/_static/mxnet-theme/navbar.html

@@ -98,6 +98,7 @@ <h1 id="logo-wrap">
       </div>
       <div id="search-input-wrap">
           {{searchform('', False)}}
+          <div id="search-preview"></div>
       </div>
       <div id='searchIcon'>
           <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

docs/_static/mxnet.css

@@ -237,6 +237,10 @@ img {
     width: 140px;
 }
 
+#search-input-wrap ul {
+    list-style-type: none;
+}
+
 #searchIcon {
     display: none;
     position: fixed;
@@ -250,6 +254,16 @@ img {
     top: 0;
     left: 0;
     width: 140px;
+    background: #87CEFA;
+}
+
+.searchBox input {
+    background: #87CEFA;
+    border-radius: 2px;
+}
+
+.searchBox input::placeholder {
+    color: white;
 }
 
 .searchBtn {
@@ -889,6 +903,32 @@ table.docutils tr:nth-child(even) {
     height: 38px;
 }
 
-div.toctree-wrapper.compound > ul > li, div.section > ul > li {
-    padding: 5px 0 5px 0;
+
+/*----------------Search function style------------------*/
+#searchPage {
+    width: 60%;
+    margin-left: 20%;
+}
+
+#search-preview {
+    display: none;
+    background-color: white;
+    margin-top: 35px;
+    border: solid;
+    border-width: 1px;
+    border-color: #87CEFA;
+    width: 100%;
+}
+
+#search-preview p {
+    color: dimgray;
+    padding: 5px 0 0 40px;
 }
+
+#search-preview li {
+    padding-top: 10px;
+}
+
+#search-results ul {
+    list-style-type: none;
+}