javascript - TextBox with DropDown using bootstrap -

i using bootstrap develop project. have requirement of dropdown text filter.if user know list item he/she can directly input text , search list or he/she can scroll item. after selection item should display in text box.

i have been searching in internet haven't found solution.

however below link helpful not fully.

https://code.google.com/p/ufd/

please if knows please let me know.

for countries, cities , address, should use google maps functionality.

here how done

function initialize() {    var mapoptions = {      center: new google.maps.latlng(-33.8688, 151.2195),      zoom: 13    };    var map = new google.maps.map(document.getelementbyid('map-canvas'),      mapoptions);      var input = /** @type {htmlinputelement} */(        document.getelementbyid('pac-input'));      var types = document.getelementbyid('type-selector');    map.controls[google.maps.controlposition.top_left].push(input);    map.controls[google.maps.controlposition.top_left].push(types);      var autocomplete = new google.maps.places.autocomplete(input);    autocomplete.bindto('bounds', map);      var infowindow = new google.maps.infowindow();    var marker = new google.maps.marker({      map: map,      anchorpoint: new google.maps.point(0, -29)    });      google.maps.event.addlistener(autocomplete, 'place_changed', function() {      infowindow.close();      marker.setvisible(false);      var place = autocomplete.getplace();      if (!place.geometry) {        window.alert("autocomplete's returned place contains no geometry");        return;      }        // if place has geometry, present on map.      if (place.geometry.viewport) {        map.fitbounds(place.geometry.viewport);      } else {        map.setcenter(place.geometry.location);        map.setzoom(17);  // why 17? because looks good.      }      marker.seticon(/** @type {google.maps.icon} */({        url: place.icon,        size: new google.maps.size(71, 71),        origin: new google.maps.point(0, 0),        anchor: new google.maps.point(17, 34),        scaledsize: new google.maps.size(35, 35)      }));      marker.setposition(place.geometry.location);      marker.setvisible(true);        var address = '';      if (place.address_components) {        address = [          (place.address_components[0] && place.address_components[0].short_name || ''),          (place.address_components[1] && place.address_components[1].short_name || ''),          (place.address_components[2] && place.address_components[2].short_name || '')        ].join(' ');      }        infowindow.setcontent('<div><strong>' + place.name + '</strong><br>' + address);      infowindow.open(map, marker);    });      // sets listener on radio button change filter type on places    // autocomplete.    function setupclicklistener(id, types) {      var radiobutton = document.getelementbyid(id);      google.maps.event.adddomlistener(radiobutton, 'click', function() {        autocomplete.settypes(types);      });    }      setupclicklistener('changetype-all', []);    setupclicklistener('changetype-address', ['address']);    setupclicklistener('changetype-establishment', ['establishment']);    setupclicklistener('changetype-geocode', ['geocode']);  }    google.maps.event.adddomlistener(window, 'load', initialize);

html, body, #map-canvas {          height: 100%;          margin: 0px;          padding: 0px        }        .controls {          margin-top: 16px;          border: 1px solid transparent;          border-radius: 2px 0 0 2px;          box-sizing: border-box;          -moz-box-sizing: border-box;          height: 32px;          outline: none;          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);        }          #pac-input {          background-color: #fff;          font-family: roboto;          font-size: 15px;          font-weight: 300;          margin-left: 12px;          padding: 0 11px 0 13px;          text-overflow: ellipsis;          width: 400px;        }          #pac-input:focus {          border-color: #4d90fe;        }          .pac-container {          font-family: roboto;        }          #type-selector {          color: #fff;          background-color: #4d90fe;          padding: 5px 11px 0px 11px;        }          #type-selector label {          font-family: roboto;          font-size: 13px;          font-weight: 300;        }

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>    <input id="pac-input" class="controls" type="text"          placeholder="enter location">      <div id="type-selector" class="controls">        <input type="radio" name="type" id="changetype-all" checked="checked">        <label for="changetype-all">all</label>          <input type="radio" name="type" id="changetype-establishment">        <label for="changetype-establishment">establishments</label>          <input type="radio" name="type" id="changetype-address">        <label for="changetype-address">addresses</label>          <input type="radio" name="type" id="changetype-geocode">        <label for="changetype-geocode">geocodes</label>      </div>      <div id="map-canvas"></div>