Autocomplete Address Search Bar

Submitted by alpha_luna on Thursday, July 14, 2016 - 13:45.

Autocomplete Address Search Bar

In this tutorial, we are going to create Autocomplete Address Search Bar. We are going to use JavaScript Library to create this simple program in autocomplete address search bar. You can use this program in your website or systems for the user to search their desired location or address that they want. A user enters the address or location that they want, then it will display those places in dropdown element and they can select the address that they want to.

Creating Markup

This short source code consists one TextBox where the user can type their desired address or location that they want to search and the container for the result.

<input type="search" id="address" class="form-control" placeholder="Type an Address . . . . ." />
 
<p>Selected: <strong id="address-value">none</strong></p>

JavaScript Code

This script will help us to display those places when the user enters their desired address to search in TextBox.

<script src="places.min.js"></script>
<script>
(function() {
  var placesAutocomplete = places({
    container: document.querySelector('#address')
  });
 
  var $address = document.querySelector('#address-value')
  placesAutocomplete.on('change', function(e) {
    $address.textContent = e.suggestion.value 
  });
 
  placesAutocomplete.on('clear', function() {
    $address.textContent = 'none';
  });
 
})();
</script>

Output

The user enters their desired address or location to search. Look like. Result

It will autocomplete using dropdown where the user can choose their desired address or location. Result

After click the desired address or location. This is the output. Result

Hope that this tutorial will help you a lot. If you are interested in programming, we have an example of programs that may help you even just in small ways. If you want more tutorials, you can visit our website, click here. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

156 views