YouTube Suggest Queries

by Shan Eapen Koshy

HTML

<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
</head>

<body>

  <input type="text" id="search" placeholder="luciana zogbi..">

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
</body>

CSS

body {
  background: #1f2227;
}

input {
  display: block;
  width: 90%;
  height: 30px;
  font-size: 20px;
  margin: 30px auto;
  border-radius: 5px;
  border: 0;
}

JavaScript

/**
 * Visit https://codegena.com
 * Check https://codepen.io/tayfunerbilen/pen/rIHvD for autocomplete with youtube api
 */

var suggestCallBack; // global var for autocomplete jsonp

$(document).ready(function() {
  $("#search").autocomplete({
    source: function(request, response) {
      $.getJSON("https://suggestqueries.google.com/complete/search?callback=?", {
        "hl": "en", // Language
        "ds": "yt", // Restrict lookup to youtube
        "jsonp": "suggestCallBack", // jsonp callback function name
        "q": request.term, // query term
        "client": "youtube" // force youtube style response, i.e. jsonp
      });
      suggestCallBack = function(data) {
        var suggestions = [];
        $.each(data[1], function(key, val) {
          suggestions.push({
            "value": val[0]
          });
        });
        suggestions.length = 5; // prune suggestions list to only 5 items
        response(suggestions);
      };
    },
    select: function(event, ui) {
      console.log(ui.item.label);
    }
  });
});