Typeahead.js and API themoviedb

http://stackoverflow.com/questions/21434566/typeahead-js-and-api-themoviedb

by Ben Smith

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
<input type="text" id="movies">

CSS

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

.title,
.my-field-1 {
  font-family: Prociono;
}

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

.example {
  padding: 30px 0;
}

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

.demo {
  position: relative;
  *z-index: 1;
  margin: 50px 0;
}

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

.typeahead {
  background-color: #fff;
}

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

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

.tt-hint {
  color: #999
}

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

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

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

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

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

.example-twitter-oss .my-field-2 {
  float: right;
  font-style: italic;
}

.example-twitter-oss .my-field-1 {
  font-weight: bold;
}

.example-twitter-oss .my-field-3 {
  font-size: 14px;
}

JavaScript

$('#movies').typeahead({
        displayKey: 'value',
        header: '<b>Movie suggestions...</b>',
        limit: 10,
        minLength: 3,
        remote: {
            url : 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=f22e6ce68f5e5002e71c20bcba477e7d',
            filter: function (parsedResponse) {               
                retval = [];
                for (var i = 0;  i < parsedResponse.results.length;  i++) {
                    retval.push({
                        value: parsedResponse.results[i].original_title,
                        tokens: [parsedResponse.results[i].original_title]
                    });
                }
                return retval;
            },
            dataType: 'jsonp'
        }
    });