A2Geo.ru - найти геокоординаты по списку адресов.
Без программирования. Результат в Excel.

Автозаполнение, прямое и обратное геокодирование

В примере представлены функция автозаполнения населённого пункта и адреса.
Используемые инструменты:

API GeoTree - принимает текстовую строку, географические координаты и возвращает ближайшие объекты к указанной точке.
Плагин jQuery Autocomplete - используется для автоподстановки (автодополнения) данных.

Пример

Показать исходный код с комментариями
Открыть пример на отдельной странице

<!DOCTYPE html>
<html>
  <head>
    <title>Автозаполнение, прямое и обратное геокодирование</title>
    <link rel="stylesheet" href="https://files.geotree.ru/jquery/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://files.geotree.ru/jquery/jquery-1.12.4.js" defer></script>
    <script src="https://files.geotree.ru/jquery/ui/1.12.1/jquery-ui.js" defer></script>
    <style>
      .ui-autocomplete-loading {
        background: white url("https://files.geotree.ru/jquery/ui/images/ui-anim_basic_16x16.gif") right center no-repeat;
      }
	  #address, #place {
		width: 100%;
		font-weight: bolder;
		padding: 5px;
		border-radius: 5px;
	  }
    </style>
  </head>
  <body>
  <input type="text" id="place" placeholder="Населённый пункт">
  <input type="text" id="address" placeholder="Адрес">
<script>
var URL_ADDRESS_API="https://api.geotree.ru/address.php?types=address";
var URL_PLACE_API="https://api.geotree.ru/search.php?levels=4";
window.addEventListener("load", function(event) {
  autocomplete_init_place();
  autocomplete_init_address();
});

//Иницилизация параметров автозаполнения населённого пункта
function autocomplete_init_place() {
  $("#place").autocomplete({
    source: URL_PLACE_API,
    minLength: 0, //минимальное количество символов для отображения подсказок
    delay: 0, //задержка отображения подсказок
    select: autocomplete_select_place //обработчик события выбора подсказки
  })
  //разделение каждой подсказку на значение и описание
  .autocomplete( "instance" )._renderItem = autocomplete_item_place;
}

//Иницилизация параметров автозаполнения адреса
function autocomplete_init_address() {
  $("#address").autocomplete({
    source: URL_ADDRESS_API,
    minLength: 0, //минимальное количество символов для отображения подсказок
    delay: 0, //задержка отображения подсказок
    select: autocomplete_select_address //обработчик события выбора подсказки
  })
  //разделение каждой подсказку на значение и описание
  .autocomplete( "instance" )._renderItem = autocomplete_item_address
  ;
}

//функция, разделяющая каждую подсказку для населённого пункта на значение и описание
function autocomplete_item_place (ul,item){
  //значение, которое будет установлено в текстовое поле при выборе подсказки
  item.value=item.name_display;
  //html-код подсказки
  return jQuery( "<li>" )
    .append( "<div><span style='font-weight: bold'>" + item.value + "</span><br><span>" + item.description + "</span></div>" )
    .appendTo( ul );
}

//функция, разделяющая каждую подсказку для адреса на значение и описание
function autocomplete_item_address (ul,item){
  //значение, которое будет установлено в текстовое поле при выборе подсказки
  item.value=item.address;
  //html-код подсказки
  return jQuery( "<li>" )
    .append( "<div><span style='font-weight: bold'>" + item.value + "</span><br><span>" + item.description + "</span></div>" )
    .appendTo( ul );
}

//обработчик события выбора подсказки для населённого пункта
function autocomplete_select_place(event, ui) {
  //при выборе населённого пункта изменяется источник подсказок для адреса
  //в соответствии с кодом ОКТМО выбранного населённого пункта  
  $("#address").autocomplete("option", "source", URL_ADDRESS_API+"&oktmo="+ui.item.oktmo_short);
}

//обработчик события выбора подсказки для адреса
function autocomplete_select_address(event, ui) {
  //при выборе населённого пункта изменяется источник подсказок для адреса
  //в соответствии с кодом ОКТМО выбранного адреса,
  $("#address").autocomplete("option", "source", URL_ADDRESS_API+"&oktmo="+ui.item.place_oktmo);
  //в поле для населённого пункта подставляется значение из адреса
  $("#place").val(ui.item.place_name);
}

</script>
</body>
</html>