JSFiddle - React, Tailwind, and code Playground

by mynameisdonald

HTML

<input id="movie" type="text" /><button>Search</button>

<h2>Results</h2>
<div id="search_results"></div>

JavaScript

var api_key = '470fd2ec8853e25d2f8d86f685d2270e';

$(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')
        }).done(function(response) {
            for (var i = 0; i < response.results.length; i++) {
                $('#search_results').append('<li data-id='+response.results[i].id+'>' + response.results[i].title + '</li>');
            }
        });
    });
    
    $('body').on('click', '#search_resutls li', function(){
        var id = $(this).attr('data-id');
        console.log(id);
    });
});