Movie2[IA]

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Exam</title>
    <link rel="stylesheet" href="jquery/jquery-ui.css">
    <script src="jquery/jquery.js"></script>
    <script src="jquery/jquery-ui.js"></script>
      <style type="text/css">
        #right{ width:300px; height: 200px;}
      </style>
    <script type="text/javascript">
        $(function() {
         var availableTags = [ "Kingsman", "Tomorrowland", "Jurassic World", "San Andreas Quake", "Survivor",
                         "Ex Machina", "Focus", "Blackhat", "Chappie", "Fury", "Big Hero 6", "Predestination",
                         "Gone Girl", "Jupiter Ascending", "John Wick", "Seventh Son", "Lucy", "American Sniper"
                        ];
        $("#searchTerm").autocomplete({
                          source: availableTags
        });
  });

    function GetMovieNames(movieName){
    var flickerAPI = "http://omdbapi.com/?t="+movieName;
  $.getJSON(flickerAPI, {
    tags: "mount rainier",tagmode: "any", format: "json"
  }).done(function( data ) {
  debugger;
        var output = "";

         output ='<li><img src= "'+data.Poster+'" alt ="'+data.Poster+'"></li>';
         $('.items').append(output);

        });
    }

$(function() {
    $(".items ").draggable();

    $("#right").droppable({
        drop: function(event, ui) {
            $(items.draggable).remove();

        }
    });
});

  </script>
</head>
<body>
<div id="main">
    <div >
        <span id="get">
            <h1> IA EXAM </h1>
            <input type="text" id="searchTerm" />
            <button id="search" onclick="GetMovieNames($('#searchTerm').val())">Get</button>
            <ol class="items"></ol>
        </span>
    </div>
    <div class="container">
        <strong>Current movies</strong>
        <br>
        <ul>

        </ul>
    </div>
    <div id="right" class="container">
        <strong>Drop a movie here to delete it</strong>
        <br>
    </div>
</div>

</body>
</html>