normal-searchbar.html

gistfile1.txt

<script src="https://cdnjs.cloudflare.com/ajax/libs/appbase-js/0.11.1/appbase.min.js" type="text/javascript">
</script>

<form class="search-container">
     <input type="text" id="search-bar">

   <input type="text" id="search-bar-2" placeholder="Enter City or Country" onkeyup="handleInput()">
    <a href="#"><img class="search-icon" src="http://www.endlessicons.com/wp-content/uploads/2012/12/search-icon.png"></a>
</form>
<ul id="suggestions"></ul>

body{
  padding-top: 75px;
}

#search-bar-2 {
  background: transparent;
  position:relative;
  margin: 0 auto;
  width: 100%;
  height: 45px;
  padding: 0 20px;
  font-size: 1rem;
  border: 1px solid #D0CFCE;
  outline: none;
}


.search-container{
  width: 490px;
  display: block;
  margin: 0 auto;
}

input#search-bar{
  margin: 0px auto;
  color: #cccccc;
  width: 100%;
  height: 45px;
  padding: 0 20px;
  font-size: 1rem;
  border: 1px solid #D0CFCE;
  outline: none;
  background: white;
  position:absolute;
  &:focus{
    border: 1px solid #008ABF;
    transition: 0.35s ease;
    color: #008ABF;
    &::-webkit-input-placeholder{
      transition: opacity 0.45s ease; 
  	  opacity: 0;
     }
    &::-moz-placeholder {
      transition: opacity 0.45s ease; 
  	  opacity: 0;
     }
    &:-ms-placeholder {
     transition: opacity 0.45s ease; 
  	 opacity: 0;
     }    
   }
 }

.search-icon{
  position: relative;
  float: right;
  width: 75px;
  height: 75px;
  top: -62px;
  right: -45px;
}



var appbaseRef = new Appbase({
  url: "https://scalr.api.appbase.io",
  app: "searchbar",
  credentials: "DEfrTOKJH:bf4a66de-6ef8-4177-b898-5fefd10f0633"
});

function handleInput(){
   var query = document.getElementById('search-bar-2').value;
   if(query==""){
   		  var input = document.getElementById('search-bar');
        input.value = "";
        console.log(query);
   }else{
   	showSuggestion(query);
   	showAutoComplete(query);
   	console.log(query);
	}
}

function showAutoComplete(query){
		appbaseRef.search({
      type: "searchbar",
      body: {
        suggest: {
        	"city-suggest" : {
            text : query,
            completion : {
                field : "city.city_autocomplete"
            }
        	}
    		}
    	}
	 	}).on('data', function(response) {
    		var input = document.getElementById('search-bar');
      	input.value = response.suggest['city-suggest'][0].options[0].text;
	 	}).on('error', function(error) {
      console.log(error)
   	});
}

function showSuggestion(query){
		appbaseRef.search({
      type: "searchbar",
      body: {
        query: {
            match: {
            	"city.city_autosuggest": query
            }
        }
    	}
	 	}).on('data', function(response) {
      addToUL(response.hits.hits);
	 	}).on('error', function(error) {
      console.log(error)
   	});
}

function addToUL(arr){
	    var ul = document.getElementById('suggestions');
      ul.innerHTML = "";
      var count;
      for(count = 0; count < arr.length; count++){
           var li = document.createElement("div");             li.appendChild(document.createTextNode(arr[count]._source.city));
           ul.appendChild(li);
      }
}
// while user press key get the input and show the auto completion and suggestions.
// if user enter the search button get the exact data.