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

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 { $('.dropdown-menu').append('<li><a href="#">write something..</a></li>') } }