🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Address Suggestion a lightweight jQuery address/place picker plugin that allows to autocomplete, search places using Google Map Geocode API.

Google-Maps Place-Autocomplete

Documentation

jquery-address-suggestion

A jquery plugin for address autocomplete using Google Map Geocode API

jsFiddle Demo

Install using npm :

npm install jquery-address-suggestion 

How to use it ?

HTML Example

<div class="form-group col-md-12"> 	<label for="address">Address</label> 	<input type="text" class="form-control" id="address"> </div> <div class="form-group"> 	<div class="col-md-4"> 		<label for="number">number</label> 		<input type="text" class="form-control" id="number"> 	</div> 	<div class="col-md-8"> 		<label for="street">street</label> 		<input type="text" class="form-control" id="street"> 	</div>	 </div> <div class="form-group"> 	<div class="col-md-4"> 		<label for="zip">zip</label> 		<input type="text" class="form-control" id="zip"> 	</div> 	<div class="col-md-8"> 		<label for="town">town</label> 		<input type="text" class="form-control" id="town"> 	</div>	 </div> <div class="form-group"> 	<div class="col-md-4"> 		<label for="department">Department</label> 		<input type="text" class="form-control" id="department"> 	</div> 	<div class="col-md-4"> 		<label for="region">Region</label> 		<input type="text" class="form-control" id="region"> 	</div>	 	<div class="col-md-4"> 		<label for="country">Country</label> 		<input type="text" class="form-control" id="country"> 	</div>	 </div> <script src="path_to_jquery/jquery.min.js"></script> <script src="path_to_bootstrap/bootstrap.min.js"></script> <script src="js/jquery.address-suggest.js"></script>		 

JS Example

// this config is used to bind field to be autocompleted, and also to internationalize labels var optionnalConfig = { 	label : "Adresse complete",  	street_number_input : { 		id : "number", 		label : "Numero de la rue" 	}, 	street_name_input : { 		id : "street", 		label : "Nom de la rue" 	}, 	zip_input : { 		id : "zip", 		label : "Code postal" 	}, 	town_input : { 		id : "town", 		label : "Ville" 	}, 	department_input : { 		id : "department", 		label : "Departement" 	}, 	region_input : { 		id : "region", 		label : "Region" 	}, 	country_input : { 		id : "country", 		label : "Pays" 	} }; $("input#address").suggest(optionnalConfig); 

You May Also Like