How is error handling done with the new Typeahead with Bloodhound?

http://stackoverflow.com/questions/36404383/how-is-error-handling-done-with-the-new-typeahead-with-bloodhound

by Ben Smith

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<input id='workingUrl' type='button' value='Working url'>
<input id='brokenUrl' type='button' value='Broken url'>
<h4 id='currentUrl'>
<div>
Using <span id='urlIndicator'>test</span>
</div>
</h4>
<input class="typeahead">
<h4 id='error'></h4>

CSS

@font-face {
  font-family: "Prociono";
  src: url("../font/Prociono-Regular-webfont.ttf");
}

html {
  overflow-y: scroll;
}

.container {
  margin: 0 auto;
  max-width: 750px;
  text-align: center;
}

.tt-dropdown-menu,
.gist {
  text-align: left;
}

html {
  color: #333333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.2;
}

.title,
.example-name {
  font-family: Prociono;
}

p {
  margin: 0 0 10px;
}

.title {
  font-size: 64px;
  margin: 20px 0 0;
}

.example {
  padding: 30px 0;
}

.example-name {
  font-size: 32px;
  margin: 20px 0;
}

.demo {
  margin: 50px 0;
  position: relative;
}

.typeahead,
.tt-query,
.tt-hint {
  border: 2px solid #CCCCCC;
  border-radius: 8px 8px 8px 8px;
  font-size: 24px;
  height: 30px;
  line-height: 30px;
  outline: medium none;
  padding: 8px 12px;
  width: 396px;
}

.typeahead {
  background-color: #FFFFFF;
}

.typeahead:focus {
  border: 2px solid #0097CF;
}

.tt-query {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.tt-hint {
  color: #999999;
}

.tt-dropdown-menu {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: 12px;
  padding: 8px 0;
  width: 422px;
}

.tt-suggestion {
  font-size: 18px;
  line-height: 24px;
  padding: 3px 20px;
}

.tt-suggestion.tt-cursor {
  background-color: #0097CF;
  color: #FFFFFF;
}

.tt-suggestion p {
  margin: 0;
}

.gist {
  font-size: 14px;
}

.example-twitter-oss .tt-suggestion {
  padding: 8px 20px;
}

.example-twitter-oss .tt-suggestion + .tt-suggestion {
  border-top: 1px solid #CCCCCC;
}

.example-twitter-oss .repo-language {
  float: right;
  font-style: italic;
}

.example-twitter-oss .repo-name {
  font-weight: bold;
}

.example-twitter-oss .repo-description {
  font-size: 14px;
}

.example-sports .league-name {
  border-bottom: 1px solid #CCCCCC;
  margin: 0 20px 5px;
  padding: 3px 0;
}

.example-arabic...

JavaScript

var _url;
var setUrlInfo = function(url, pageMessage) {
  _url = url;
  $('#urlIndicator').text(pageMessage);
};

setUrlInfo('https://api.themoviedb.org/3/search/movie?api_key=f22e6ce68f5e5002e71c20bcba477e7d&query=', 'working URL');

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
  name: 'movies',
  display: 'value',
  source: function(query, syncResults, asyncResults) {
    $.get(_url + query, function(movies) {

      var results = $.map(movies.results, function(movie) {
        return {
          value: movie.original_title
        }
      });

      asyncResults(results);
    }).fail(function() {
      $('#error').text('Error occurred during request!');
      setTimeout("$('#error').text('');", 4000);
    });
  },
  templates: {
    empty: [
      "<div class='noitems'>",
      "No Movies Found",
      "</div>"
    ].join("\n")
  }
});

$('#workingUrl').click(function() {
  setUrlInfo('http://api.themoviedb.org/3/search/movie?api_key=f22e6ce68f5e5002e71c20bcba477e7d&query=', 'working URL');
});

$('#brokenUrl').click(function() {
  setUrlInfo('httpBROKEN://api.themoviedb.org/3/search/movie?api_key=f22e6ce68f5e5002e71c20bcba477e7d&query=', 'broken URL');
});