Bootstrap Snippet NLK Web Search Box using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"NLK Web Search Box"
Bootstrap 3.3.0 Snippet by filak

Related: See More

Questions / Comments:

"NLK Web Search Box" Bootstrap 3.3.0 Snippet by filak

Related: See More

Questions / Comments:

"NLK Web Search Box"
Bootstrap 3.3.0 Snippet by filak