Select2 ajax example

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link data-require="select2@*" data-semver="3.5.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" />
    <link data-require="select2@*" data-semver="3.5.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="select2@*" data-semver="3.5.1" src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
    <script data-require="lodash.js@*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <input type="hidden" class="js-data-example-ajax form-control" />
    <script src="script.js"></script>
  </body>

</html>

// Code goes here

$(".js-data-example-ajax").select2({
  ajax: {
    url: "http://geocode-maps.yandex.ru/1.x/",
    dataType: 'json',
    delay: 250,
    data: function (query) {
      if (!query) query = 'Москва';
      
      return {
        geocode: query,
        format: 'json'
      };
    },
    results: function (data) {
      var parsed = [];
      
      try {
        parsed = _.chain(data.response.GeoObjectCollection.featureMember)
          .pluck('GeoObject')
          .map(function (item, index) {
            return {
              id: index,
              text: item.name
            };
          })
          .value();
      } catch (e) { }
      
      return {
        results: parsed
      };
    },
    cache: true
  }
});

/* Styles go here */