jquery.cityAutocomplete

City autocomplete dropdown

How to Use?

City autocomplete depends on jquery and google maps js api:

<link rel="stylesheet" type="text/css" href="city-autocomplete.min.css"/>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&language=en"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.city-autocomplete.min.js" type="text/javascript"></script>

Change API_KEY to your Google API KEY. [https://developers.google.com/maps/documentation/javascript/get-api-key](Get API Key)

Create input:

<input id="city" name="city" autocomplete="off">

then

$('input#city').cityAutocomplete(options);

Possible options:

• show_state - boolean, shows state in dropdown, default - false
• show_country - boolean, shows country in dropdown, default - false

You can set data-country attribute for input to search cities only for selected country:

<input id="city" name="city" autocomplete="off" data-country="ru">