Advertisement
niammuddin

Youtube API jQuery AutoComplete

Jan 26th, 2015
306
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2. <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
  3. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  4.     <script>
  5.         $(document).ready(function(){
  6.             $("#youtube").autocomplete({
  7.     source: function(request, response){
  8.         /* Google Developer ID (optional) */
  9.         var apiKey = 'AI39si7ZLU83bKtKd4MrdzqcjTVI3DK9FvwJR6a4kB_SW_Dbuskit-mEYqskkSsFLxN5DiG1OBzdHzYfW0zXWjxirQKyxJfdkg';
  10.         /* Search keyword */
  11.         var query = request.term;
  12.         /* youtube sorgusu */
  13.         $.ajax({
  14.             url: "http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q="+query+"&key="+apiKey+"&format=5&alt=json&callback=?",  
  15.             dataType: 'jsonp',
  16.             success: function(data, textStatus, request) {
  17.                response( $.map( data[1], function(item) {
  18.                     return {
  19.                         label: item[0],
  20.                         value: item[0]
  21.                     }
  22.                 }));
  23.             }
  24.         });
  25.     },
  26.     /* You can use transaction is selected here to */
  27.     select: function( event, ui ) {
  28.         $.youtubeAPI(ui.item.label);
  29.     }
  30.     });
  31.  
  32.             $('button#submit').click(function(){
  33.     var value = $('input#youtube').val();
  34.         $.youtubeAPI(value);
  35.     });
  36.  
  37.  
  38.             $.youtubeAPI = function(kelime){
  39.     var sonuc = $('#sonuc');
  40.     sonuc.html('Arama gerçeklestiriliyor...');
  41.     $.ajax({
  42.         type: 'GET',
  43.         url: 'http://gdata.youtube.com/feeds/api/videos?q=' + kelime + '&max-results=15&v=2&alt=jsonc',
  44.         dataType: 'jsonp',
  45.         success: function( veri ){
  46.             if( veri.data.items ){
  47.                 sonuc.empty();
  48.                 $.each( veri.data.items, function(i, data) {
  49.                     sonuc.append('<div class="youtube">\
  50.                        <img src="' + data.thumbnail.sqDefault + '" alt="" />\
  51.                        <h3><a href="javascript:void(0)" onclick="$.youtubePlay(\'' + data.id + '\', \'' + data.content[5] + '\')">' + data.title + '</a></h3>\
  52.                        <p>' + data.description + '</p>\
  53.                    </div>\
  54.                    <div class="youtubeOynat" id="' + data.id + '"></div>');
  55.                 });
  56.             }
  57.             else {
  58.                 sonuc.html('<div class="hata"><strong>' + kelime + '</strong> ile ilgili hiç video bulunamadi!</div>');
  59.             }
  60.         }
  61.     });
  62.     }
  63.             $.youtubePlay = function(yid, frame){
  64.     $('.youtubeOynat').slideUp().empty();
  65.     $('#'+yid).slideDown().html('<iframe src="'+ frame +'&autoplay=1" style="width: 100%; box-sizing: border-box; height: 300px" />');
  66.     }
  67.         });
  68.     </script>
  69.  
  70.     <div align="center" class="arama">
  71.     <form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  72.         <div class="ui-widget">
  73.             <input name="s" id="youtube" />
  74.             <button type="submit" id="submit">SEARCH</button>
  75.         </div>
  76.     </form>
  77.     </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement