YouTube API autocomplete search suggestion using Jquery JSON request

As we all know YouTube is one of the most popular in video sharing website in the world. People like us want to build the video website like YouTube. So YouTube has given the option for the people to develop or integrate the videos through YouTube V3 API’s. There are lots of YouTube API’s and each API will provide the data’s for different modules. This article provides how to achieve the search with suggestion for the user using YouTube V3 API.

Viewer can download and see the demo of the sample YouTube search suggestion api code.

Please find API tutorial below.

Below tutorial will explain “youtube api search suggestion” demo and how it works.

HTML Code

Create Input box and button to get full view of search box. Please find the code snippet below to get better idea.

<div class="container-4">
    <form action="" method="post" name="hyv-yt-search" id="hyv-yt-search">
      <input type="search" name="hyv-search" id="hyv-search" placeholder="Search..." class="ui-autocomplete-input" autocomplete="off">
      <button class="icon" id="hyv-searchBtn"></button>
    </form>
</div>

CSS Code

And for easy use for user, below css code will bring you YouTube like search style. Find the CSS code snippet below

.container-4 input#hyv-search {
    width: 500px;
    height: 30px;
    border: 1px solid #c6c6c6;
    font-size: 10pt;
    float: left;
    padding-left: 15px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.container-4 button.icon {
    height: 30px;
    background: #f0f0f0 url('images/searchicon.png') 10px 1px no-repeat;
    background-size: 24px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #c6c6c6;
    width: 50px;
    margin-left: -44px;
    color: #4f5b66;
    font-size: 10pt;
}

Include 3rd party dependency

Before implementing the jQuery Ajax request for “YouTube autocomplete search suggestions API” include jQuery framework and jQuery UI dependency

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />
<script src="//code.jquery.com/jquery-2.1.4.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js" type="text/javascript"></script>

Javascript Code

Below Jquery code will implement the YouTube search suggestions API

jQuery(function() {
    jQuery("#hyv-search").autocomplete({
        source: function(request, response) {
            var sqValue[];
            jQuery.ajax({
                type: "POST",
                url: "http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1",
                dataType: 'jsonp',
                data: jQuery.extend({
                    q: request.term
                }, {}),
                success: function(data) {
                    console.log(data[1]);
                    obj data[1];
                    jQuery.each(obj, function(key, value) {
                        sqValue.push(value[0]);
                    });
                    response(sqValue);
                }
            });
        }
    });
});

Download Demo