jQuery UI Autocomplete

Nested ajax calls

by Wederson

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="input-group input-group-lg">
  
   <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
   <input class="btncaixa"" id="spotify-album-search" name="album[query]" placeholder="Search" type="text" autocomplete="off">
</form>
 </div>
                                                                                                                             <div class="new"></div>

CSS

.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  _width: 160px;
  padding: 4px 0;
  list-style: none;
  background-color: #ffffff;
  border-color: #999999;
  border-style: solid;
  border-width: 1px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px;
}

.ui-autocomplete .ui-menu-item > a.ui-corner-all {
  display: block;
  padding: 3px 15px;
  clear: both;
  font-weight: normal;
  line-height: 18px;
  color: #555555;
  white-space: nowrap;
  min-height: 50px;
}

.ui-autocomplete .ui-menu-item > a.ui-corner-all:hover {
  color: #333333;
  text-decoration: none;
  background-color: #eeeeee;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  background-image: none;
}

.ui-autocomplete .ui-menu-item > a.ui-corner-all:active {
  color: #333333;
  text-decoration: none;
  background-color: #eeeeee;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  background-image: none;
}

.ui-autocomplete {
  vertical-align: middle;
}

.ui-autocomplete .ui-menu-item {
  vertical-align: middle;
  border-bottom: 1px solid #eeeeee;
}

.ui-autocomplete .ui-menu-item .ui-autocomplete-icon {
  vertical-align: middle;
  padding-left: 1em;
}

.ui-autocomplete .ui-menu-item .ui-autocomplete-icon i {
  display: inline-block;
  font-size: 2em;
  line-height: 2em;
  text-align: center;
  vertical-align: bottom;
  color: #27ae60;
}

.ui-autocomplete .ui-menu-item .ui-autocomplete-artist {
  font-weight: bold;
  font-size: 1.2em;
  height: 55px;
  line-height: 55px;
 ...

JavaScript

$('#spotify-album-search').autocomplete({
      source:
        function (query, process) {
          $.when(
            $.ajax({
                url: 'http://ws.spotify.com/search/1/album.json?q=' + query.term,
            })
          ).then(function (data) {
            var process_data = [];
            $.each(data.albums.slice(0, 4), function(i,item) {
              $.when (
               $.ajax({
                  url: 'https://embed.spotify.com/oembed/?url=' + item.href,
                  dataType: 'jsonp'
               })
              ).then(function (image) {
                process_data.push( { artist: item.artists[0].name, album_name: item.name, label: item.artists[0].name + '' + item.name, album: item, href: item.href, image: image.thumbnail_url.replace("cover", "60")} );
                process( process_data );
              });
            });
          });
      },
      open: function(event, ui) {

      },
      select: function (e, ui) {
        e.preventDefault();
        $('#spotify-id').val(ui.item.album.href);
        $(this).val(ui.item.label);
      },
      messages: {
        noResults: '',
        results: function() {}
      }
    })
    .data('ui-autocomplete')._renderItem = function(ul, item) {
      return $('<li>')
          .data( "ui-autocomplete-item", item)
          .append('<a href="http://musica.kly.com.br/p/?name=p.php?a=' + item.artist  + '%26">' + '<img width="50" src="' + item.image + '" alt="" />' + '<span class="ui-autocomplete-artist">' + item.artist  + '</span>' + '' + '<span class="ui-autocomplete-album-name">' + '</span>' + '<span class="ui-autocomplete-icon pull-right"><i class="fa fa-plus-circle fa-2x"></i></span>' + '</a>')
          .appendTo(ul);
    };