improved usability for the apidoc search

This commit is contained in:
Carsten Brandt
2014-04-26 14:29:56 +02:00
parent 003bdf6a32
commit 23866f67a0
2 changed files with 21 additions and 10 deletions

View File

@@ -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 {

View File

@@ -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>