"NLK Web Search Box"
Bootstrap 3.3.0 Snippet by filak

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <br><br><br><br> <div class="container" id="adv-search"> <div> <form id="nlk-search-form" method="get" action="/" target="_self"> <div class="input-group input-group-lg"> <span class="input-group-btn"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="adv-search-drop"> <i class="fa fa-caret-down"></i> </button> <ul class="dropdown-menu"> <li><a role="button" class="nlk-search-type" data-radio="#target-nlk" data-value="na stránkách NLK" data-action="/" data-param="s" data-target="_self">Stránky NLK - služby, zdroje, činnosti, aktuality...</a></li> <li><a role="button" class="nlk-search-type" data-radio="#target-medvik" data-value="v portálu Medvik" data-action="http://www.medvik.cz/bmc/opensearch.do" data-param="q" data-target="_self">Medvik - katalogy knihoven, české články</a></li> <li><a role="button" class="nlk-search-type" data-radio="#target-summon" data-value="ve vyhledávači Summon" data-action="http://nlk.summon.serialssolutions.com/" data-param="q" data-target="_self">Summon - online zdroje a plné texty</a></li> </ul> </span> <input id="nlk-search-str" name="s" type="text" maxlength="200" class="form-control" placeholder="na stránkách NLK" data-def="Zadejte dotaz" required> <span class="input-group-btn"> <button class="btn btn-primary" type="button" id="nlk-search-submit"> <i class="glyphicon glyphicon-search"></i> </button> </span> </div> </form> </div> <div class="adv-search-target"> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="target-nlk" value="nlk" checked class="nlk-search-type nlk-radio" data-value="na stránkách NLK" data-action="/" data-param="s" data-target="_self"> Stránky </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="target-medvik" value="medvik" class="nlk-search-type nlk-radio" data-value="v portálu Medvik" data-action="http://www.medvik.cz/bmc/opensearch.do" data-param="q" data-target="_self"> Katalog </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="target-summon" value="summon" class="nlk-search-type nlk-radio" data-value="ve vyhledávači Summon" data-action="http://nlk.summon.serialssolutions.com/" data-param="q" data-target="_self"> Online zdroje </label> </div> </div> <br><br> <hr> <br><br> <div class="container" id="adv-search"> <div> <form id="nlk-search-form" method="get" action="/" target="_self"> <div class="input-group input-group-lg"> <span class="input-group-btn"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="adv-search-drop"> <i class="fa fa-caret-down"></i> </button> <ul class="dropdown-menu"> <li><a role="button" class="nlk-search-type" data-radio="#target-nlk" data-value="in NML Website" data-action="/" data-param="s" data-target="_self">NML Website - services, resources, activities, news...</a></li> <li><a role="button" class="nlk-search-type" data-radio="#target-medvik" data-value="in Medvik Portal" data-action="http://www.medvik.cz/bmc/opensearch.do" data-param="q" data-target="_self">Medvik - library catalogs, Czech articles</a></li> <li><a role="button" class="nlk-search-type" data-radio="#target-summon" data-value="in Summon" data-action="http://nlk.summon.serialssolutions.com/" data-param="q" data-target="_self">Summon - online resources and full texts</a></li> </ul> </span> <input id="nlk-search-str" name="s" type="text" maxlength="200" class="form-control" placeholder="in NML Website" data-def="Enter a query" required> <span class="input-group-btn"> <button class="btn btn-primary" type="button" id="nlk-search-submit"> <i class="glyphicon glyphicon-search"></i> </button> </span> </div> </form> </div> <div class="adv-search-target"> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="target-nlk" value="nlk" checked class="nlk-search-type nlk-radio" data-value="in NML Website" data-action="/" data-param="s" data-target="_self"> Website </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="target-medvik" value="medvik" class="nlk-search-type nlk-radio" data-value="in Medvik Portal" data-action="http://www.medvik.cz/bmc/opensearch.do" data-param="q" data-target="_self"> Catalogue </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="target-summon" value="summon" class="nlk-search-type nlk-radio" data-value="in Summon" data-action="http://nlk.summon.serialssolutions.com/" data-param="q" data-target="_self"> E-resources </label> </div> </div>
#adv-search { padding: 10px 0 0 0; } #adv-search .nlk-dropdown { left: -220px; } @media screen and (min-width: 768px) { #adv-search { width: 500px; margin: 0 auto; } } #nlk-search-submit { width: 70px; padding-left: 5px; padding-right: 5px; } #nlk-search-str { min-width: 140px; } .adv-search-target { margin: 5px 0 0 0; font-size: smaller; }
jQuery(document).ready(function($) { jQuery('#nlk-search-str').on('keydown', function(e) { if (e.which == 13 || event.keyCode == 13 ){ jQuery('#nlk-search-submit').trigger('click'); } }); jQuery('#nlk-search-methods').on('keydown', function(e) { if (e.which == 13 || event.keyCode == 13 ){ jQuery('#nlk-search-submit').trigger('click'); } }); jQuery('.nlk-search-type').on('click', function(){ var targetSite = jQuery(this).data('value'); var searchAction = jQuery(this).data('action'); var searchParam = jQuery(this).data('param'); var searchTarget = jQuery(this).data('target'); var targetRadio = jQuery(this).data('radio'); jQuery(targetRadio).prop('checked', true); jQuery('#nlk-search-str').attr('placeholder',targetSite); jQuery('#nlk-search-str').attr('name', searchParam); jQuery('#nlk-search-form').attr('action', searchAction); jQuery('#nlk-search-form').attr('target', searchTarget); }); jQuery('#nlk-search-submit').on('click', function(){ var searchStr = jQuery('#nlk-search-str').val(); if (!searchStr || searchStr === '') { var noquery = jQuery('#nlk-search-str').data('def'); jQuery('#nlk-search-str').attr('placeholder', noquery); } else { jQuery('#nlk-search-form').submit(); } }); });

Related: See More


Questions / Comments: