<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>TMDB</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <input type="text" class="form-control input-lg" id="movie" placeholder="Title of movie">
        </div><!-- .form-group -->
      </div> <!-- .col-md-6 -->
        <div class="col-md-6">
          <button type="submit" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">Search</button>
        </div>
      </div><!-- .col-md-6-->
    </div><!-- .row -->
  </div><!-- .container -->
  
    <p id="error"></p>

  <div class="collapse" id="collapseExample">
    <div class="well"></div>
  </div>

  <div class="container">
    <h3>Results</h3>

    <div id="titles"></div>
  </div>


</body>

</html>
ul {
  list-style-type: none;
}
img {
  height: 231px;
  padding: 3px;
}
div.shelf {
	width: 722px;
	height: 202px;
	margin: auto;
	margin-bottom: 8px;
}
div.shelf .poster {
	overflow: hidden;
	float: left;
	width: 134px;
	height: 198px;
	margin-right: 8px;
	border: 2px solid #fff;
	-webkit-box-shadow:0 0 6px #999;
	-moz-box-shadow:0 0 6px #999;
	box-shadow:0 0 6px #999;
	opacity: 0.9;
var api_key = '94a2f36cd4e27626b6a7a07766a76196';
var imageUrl = 'http://image.tmdb.org/t/p/w154';
$(document).ready(function() {
  $('button').click(function() {
    var input = $('#movie').val(),
      movieName = encodeURI(input);
    $.ajax({
      url: 'http://api.themoviedb.org/3/search/movie?api_key=' +
        api_key + '&query=' + movieName,
      dataType: 'jsonp',
      jsonpCallback: 'testing'
    }).error(function() {
      console.log('error')
      return "<img src=http://placehold.it/154x231 />";
    }).done(function(response) {
      for (var i = 0; i < response.results.length; i++) {
        $('#titles').append('<img src="' +
          imageUrl + response.results[i].poster_path +
          '" width="154"' +
          ' height="231"' +
          'class="img-rounded poster"' + 'data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"' +
          ' />'); //Working on moving modal under target row instead of below the poster return
        $('.well').append(response.results[i].original_title);
        $('img').error(function() {
          $(this).attr('src',
            'http://placehold.it/154x231&text=Poster+Not+Found'
          );
        });
      }
    });
  });
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js