ajax_work.html

<form>
	<input type="text" value="HEllo">
</form>

<ul class="results">

</ul>


<script src="http://code.jquery.com/jquery-latest.js">

</script>

<script type="text/javascript" charset="utf-8">
	
	function movieLi(movieObject){
		return "<li class='result'>"+ movieObject.Title + "</li>";

	}

	$(function(){

		$('form').on("submit", function(event){
			event.preventDefault();
		
			var searchTerm = $('input').val();
			
			console.log(searchTerm);

			$.ajax({
				url: "http://www.omdbapi.com/",
				method: "get",
				dataType: "jsonp",
				data: {"s": searchTerm, "callback": "movies"},
				jsonpCallback: "movies",
				success: function(data){
					
					if(data["Search"]){
						console.log("Good Search")
						movies = data["Search"];
					} else{
						console.log("Bad Search")
						movies = [];
					}

					for(var i= 0; i < movies.length; i++){

						$(".results").append(movieLi(movies[i]))
					}


				}
			})
		})
	})


</script>