improved usability for the apidoc search

extensions/apidoc/templates/bootstrap/assets/css/style.css

@@ -119,8 +119,12 @@ table.summary-table .col-defined  { width: 15%; }
     top: 50px;
     z-index: 1000;
 
-    background: #fff;
-    border: solid 1px #000;
+    border-radius: 0;
+    /* reset all due to android browser issues http://caniuse.com/#search=border-radius */
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
 #search-results {

extensions/apidoc/templates/bootstrap/layouts/main.php

@@ -83,15 +83,13 @@ $this->beginPage();
     $this->registerJsFile('./jssearch.index.js', 'yii\apidoc\templates\bootstrap\assets\JsSearchAsset');
     $this->registerJs(<<<JS
 
-$('#searchbox').focus();
+var searchBox = $('#searchbox');
 
-$(document).on("keyup", function(event) {
-    if (event.which == 27) {
-        $('#search-resultbox').hide();
-    }
-});
+// focus the search field
+searchBox.focus();
 
-$('#searchbox').on("keyup", function(event) {
+// search when typing in search field
+searchBox.on("keyup", function(event) {
     var query = $(this).val();
 
     if (query == '' || event.which == 27) {
@@ -151,13 +149,22 @@ $('#searchbox').on("keyup", function(event) {
         $('#search-results').html(resHtml);
     }
 });
+
+// hide the search results on ESC
+$(document).on("keyup", function(event) { if (event.which == 27) { $('#search-resultbox').hide(); } });
+// hide search results on click to document
+$(document).bind('click', function (e) { $('#search-resultbox').hide(); });
+// except the following:
+searchBox.bind('click', function(e) { e.stopPropagation(); });
+$('#search-resultbox').bind('click', function(e) { e.stopPropagation(); });
+
 JS
 );
 
     NavBar::end();
     ?>
 
-    <div id="search-resultbox" style="display: none;">
+    <div id="search-resultbox" style="display: none;" class="modal-content">
         <ul id="search-results">
         </ul>
     </div>