Bootstrap Snippet search box hints in navbar using HTML Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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 ---------->
<nav id="map-nav" class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
                    YOUR_LOGO
                </a>
        </div>
            <div class="navbar-form">
                <div class="col-lg-4 col-sm-6">
                    <div class="dropdown">
                        <input type="text" class="form-control" placeholder="Cerca stazione.." onkeyup="showHints()" id="searchStationInput" data-toggle="dropdown">
                        <ul class="dropdown-menu" data-input="searchStationInput"></ul>
                    </div>
                </div>
            </div>
      </div>
    </nav>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
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
var o = [
    {
        name : "Udine"
    },
    {
        name: "Trieste"
    },
    {
        name: "Gorizia"
    },
    {
        name: "Gradisca"  
    },
    {
        name: "Gorgo"
    },
    {
        name: "Pordenone"   
    },
    {
        name: "Uccea"
    }
]
var showHints = function(){
    var str = $('#searchStationInput').val().toLowerCase();
    $('.dropdown-menu').html("");
    if ( typeof str != "undefined" && str !== "" ) {
        
        for ( var el of o) {
            var name = el.name.toLowerCase();
            if ( name.indexOf(str) !== -1 ){
                $('.dropdown-menu').append('<li><a href="#">'+el.name+'</a></li>')
            }
        }
        $('.dropdown').dropdown();
    } else {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"search box hints in navbar"
Bootstrap 3.3.0 Snippet by gaghigogu

Related: See More

Questions / Comments:

"search box hints in navbar" Bootstrap 3.3.0 Snippet by gaghigogu

Related: See More

Questions / Comments:

"search box hints in navbar"
Bootstrap 3.3.0 Snippet by gaghigogu