PowerPartners.ru

        <div class="city">
          <div>Ваш город:</div>
          <div>
            <i class="powericon-spinner powericon-pulse" id="city-spinner"></i>
            <a href="#" class="dotted" id="city"></a>
            <div class="autocomplete" style="display: none;">
              <input id="city_input" type="search" spellcheck="false" placeholder="Город">
            </div>
          </div>
        </div>

        <div class="city">
          <div>Ваш город:</div>
          <div>
            <i class="powericon-spinner powericon-pulse" id="city-spinner"></i>
            <a href="#" class="dotted" id="city"></a>
            <div class="autocomplete" style="display: none;">
              <input id="city_input" type="search" spellcheck="false" placeholder="Город">
            </div>
          </div>
        </div>

function displayCity(city) {
  $('#city-spinner').hide();
  $('#city').text(city)
  if ($('.autocomplete').css("display") == "none")
    $('#city').css('display', 'inline');
}

if (city)
  displayCity(city);

var city = getCookie('idm_city');

<div class="city">
  <div>Ваш город:</div>
  <div>
    <i class="powericon-spinner powericon-pulse" id="city-spinner"></i>
    <a href="#" class="dotted" id="city"></a>
    <div class="autocomplete" style="display: none;">
      <input id="city_input" type="search" spellcheck="false" placeholder="Город">
    </div>
  </div>
</div>

<!-- Я.Карты -->
<script src="//api-maps.yandex.ru/2.1/?apikey=xxxx-xxxx-xxxx-xxxx&lang=ru_RU" type="text/javascript"></script>
<!-- Библиотека yadc.js -->
<script src="//cdn.yadc-js.ru/yadc.js" type="text/javascript" charset="utf-8"></script>
<!-- Библиотека InteractiveDeliveryMap -->
<script src="/theme/js/idm.js" type="text/javascript"></script>
<!-- Разные функции, в том числе для работы с cookies -->
<script src="/theme/js/utils.js" type="text/javascript"></script>
<!-- Выпадающий список с функцией автодополнения для выбора города -->
<script src="/theme/js/lib/autocomplete/autocomplete.js" type="text/javascript"></script>
<link href="/theme/js/lib/autocomplete/autocomplete.css" rel="stylesheet" media="all" />

<script type="text/javascript">
  // При клике на название города - открываем выпадающий список с автодополнением
  $('#city').on('click', onCityClick);

  // Пробуем взять название города из cookie. Там мы его сохраняем как в кэше, что бы постоянно его не определять заново
  var city = getCookie('idm_city');

  // Дожидаемся готовности Я.Карт
  ymaps.ready(function(){
    // Создаем InteractiveDeliveryMap, передав ему обработчики событий
    window.idm = new InteractiveDeliveryMap({
      onPickupCitiesList: onPickupCitiesList,
      onCalcDeliveryAddressFound: onCalcDeliveryAddressFound,
      onPickupCity: onPickupCity,
    });
    // Запрашиваем полный список городов с пунктами выдачи
    window.idm.getPickupCitiesList();

    if (city)
      // Если город сохранен в cookie - просто отображаем его
      displayCity(city)
    else
      // Если нет - начинаем расчет стоимости доставки, попутно определяя координаты пользователя
      window.idm.calcDelivery();
  });


  ///////////////////////////////////////////////////////////////////////////////////////
  // Вызывается, когда получен полный список городов с пунктами выдачи
  function onPickupCitiesList(cities) {
    // Создаем выпадающий список с городами и устанавливаем обработчики событий на потерю фокуса и выбор города
    autocomplete(document.getElementById("city_input"), cities, {
      onBlur: onCitiesListBlur,
      onSelect: onCitySelect,
    });
  }

  ///////////////////////////////////////////////////////////////////////////////////////
  // Вызывается, когда найдены GPS координаты пользователя
  function onCalcDeliveryAddressFound(addr, coord) {
    // Запускаем поиск ближайшего к пользователю города, где есть пункт выдачи
    window.idm.getPickupCityByCoord(coord, {});
  }

  ///////////////////////////////////////////////////////////////////////////////////////
  // Вызывается, когда найден ближайший к пользователю город, где есть ПВЗ
  function onPickupCity(data) {
    // Отображаем город
    displayCity(data.city);
  }

  ///////////////////////////////////////////////////////////////////////////////////////
  // Вызывается при клике на название города
  function onCityClick(e) {
    // Предотвращаем переход по ссылке
    e.preventDefault();
    // Прячем ссылку на которой кликнули
    $(e.target).hide(0);
    // Вместо нее показываем выпадающий список и устанавливаем на него фокус
    $('.autocomplete').show();
    $('.autocomplete input').focus();
  }

  ///////////////////////////////////////////////////////////////////////////////////////
  // Вызывается при выборе города в выпадающем списке
  function onCitySelect(city) {
    // Отображаем название выбранного города в ссылке
    $('#city').text(city);
    // Прячем выпадающий список
    $('#pickup').hide();
    // Сохраняем выбранный город в cookie, чтобы на других страницах повторно не определять
    setCookie('idm_city', city, false);
  }

  ///////////////////////////////////////////////////////////////////////////////////////
  // Вызывается, когда выпадающий список городов теряет фокус
  function onCitiesListBlur() {
    // Прячем выпадающий список
    $('.autocomplete').hide();
    // Отображаем ссылку с названием города
    $('#city').show();
  }

  ///////////////////////////////////////////////////////////////////////////////////////
  // Отображаем город
  function displayCity(city) {
    // Прячем спинер
    $('#city-spinner').hide();
    // Отображаем название города
    $('#city').text(city);
    // Сохраняем его в cookie, чтобы на других страницах повторно не определять
    setCookie('idm_city', city, false);
    // Устанавливаем название города в placeholder-е выпадающего списка
    document.getElementById("city_input").setAttribute("placeholder", city);
    // Выставляем CSS display: inline для списка
    if ($('.autocomplete').css("display") == "none")
      $('#city').css('display', 'inline');
  }

</script>