JSFiddle - React, Tailwind, and code Playground

by Roger Sanchez

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<div class="arama">
    <form action="" onsubmit="return false">
        <div class="ui-widget">
            <label for="youtube">Youtube Search: </label>
            <input id="youtube" />
            <button id="submit">Search</button>
        </div>
    </form>
</div>

<div id="sonuc"></div>

CSS

* { padding: 0; margin: 0; list-style: none; font-family: Arial }

.youtubeOynat { display: none; background: #ddd; padding: 10px }
.youtube {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px;
    overflow: hidden
}
.youtube img {
    float: left;
    margin-right: 15px
}
.youtube a {
    text-decoration: none;
    color: darkred
}
.youtube p {
    padding-top: 10px
}

.arama {
    padding: 10px
}
.arama h2 {
    font-weight: normal;
    padding-bottom: 10px
}

.hata {
    margin: 10px;
    background-color: darkred;
    color: #fff;
    font-size: 12px;
    padding: 5px
}

JavaScript

$("#youtube").autocomplete({
    source: function(request, response){
        var apiKey = 'AIzaSyB2noOyMMsXisO-wYI7y-LOHeuHKGahTUI';
        var query = request.term;
        $.ajax({
            url: "http://suggestqueries.google.com/complete/search?hl=br&ds=yt&client=youtube&hjson=t&cp=1&q="+query+"&key="+apiKey+"&format=5&alt=json&callback=?",  
            dataType: 'jsonp',
            success: function(data, textStatus, request) { 
             
               response( $.map( data[1], function(item) {
                    return {
                        label: item[0],
                        value: item[0]
                    }
                }));
            }
        });
    },
    select: function( event, ui ) {
        $.youtubeAPI(ui.item.label);
    }
});

$('button#submit').click(function(){
    var value = $('input#youtube').val();
        $.youtubeAPI(value);
});

$.youtubeAPI = function(kelime){
    var sonuc = $('#sonuc');
    //sonuc.html('Arama gerçekleştiriliyor...');
    //alert(kelime);
    $.ajax({
        type: 'GET',
        url: 'https://www.googleapis.com/youtube/v3/search?part=snippet&regionCode=br&q=' + kelime + '&key=AIzaSyB2noOyMMsXisO-wYI7y-LOHeuHKGahTUI',
        dataType: 'jsonp',
        success: function(veri){
            sonuc.html(JSON.stringify(veri.items));
            //alert(veri.length)
            //alert(JSON.stringify(veri));
            if( veri.items ){
                sonuc.empty();
                $.each( veri.items, function(i, data) {
                    console.log(data);
                    sonuc.append('<div class="youtube">\
                        <img src="' + data.snippet.thumbnails.default.url + '" alt="" />\
                        <h3><a href="javascript:void(0)" onclick="$.youtubePlay(\'' + data.id.videoId + '\')">' + data.snippet.title + '</a></h3>\
                        <p>' + data.snippet.description + '</p>\
                    </div>\
                    <div class="youtubeOynat" id="' +...