AJAX Datalist

A datalist pulling its content via AJAX from API data.

HTML

<input type="text" list="movies" data-movie-search placeholder="Search for a movie..." />
<datalist id="movies" data-movie-list></datalist>

CSS

@import "compass/css3";

body {
  background: #336699;
}

[data-movie-search] {
  border: 2px solid #efefef;
  font-size: 1.5em;
  display: block;
  width: 80%;
  padding: 1em;
  margin: 3rem auto;
}

JavaScript

'use strict';

var MOVIE_SEARCH = {
  rtApiKey: '',
  rtApiEndpoint: '',
  delay: 0,
  timer: 0,
  input: {},
  list: {},
  init: function() {
    // Define elements
    this.input = $('[data-movie-search');
    this.list = $('[data-movie-list]');
    
    // Set delay
    this.delay = 300; // 300 milliseconds
    
    // Set Rotten Tomatoes data
    this.rtApiKey = 'jpe83dcf7beyxqn6gxwm2cwa';
    this.rtApiEndpoint = 'http://api.rottentomatoes.com/api/public/v1.0/movies.json';

    // Add event listeners
    this.input.on('keyup', this.setTimer.bind(this));
  },
  
  setTimer: function() {
    if ( this.timer ) {
      clearTimeout(this.timer);
    }
    
    this.timer = setTimeout( this.processQuery.bind(this), this.delay );
  },
  
  processQuery: function() {
    var query = this.input.val();
    
    if ( ! query ) {
      return false;
    }
    
    $.ajax({
      dataType: 'jsonp',
      url: this.rtApiEndpoint,
      data: {
        apikey: this.rtApiKey,
        q: query
      },
      success: this.updateMovieList.bind(this)
    });
  },
  
  updateMovieList: function( response ) {
    if ( 'object' === typeof( response.movies ) ) {
      var movies = response.movies;
      
      // Clear the list
      this.list.html('');

      $.each( movies, function(idx, movie) {
        this.list.append('<option>' + movie.title + '</option>');
      }.bind(this));
    }
  }
};

$(document).ready(function() {
  MOVIE_SEARCH.init();
});