Integrating youtube auto-complete on your website


Home / Integrating youtube auto-complete on your website

screenshot of youtube autocomplete

Auto-complete nowadays is a must have for all of websites especially if you have an enormous amount of content. putting this feature on your website makes it handy for your visitors. Today i will show you how to implement this feature on your website.

I wrote this autocomplete on github few weeks ago, it uses the google suggest queries http://suggestqueries.google.com/complete/search?client=firefox&ds=yt&q to pull the data therefore, you may feel the presence of youtube auto-complete on your site as well.

Okay enough of the introduction. so here is the procedure:

Requirements:

Step 1: go to this link and download the autocomplete as zip file.

Step 2: Extract the zip file on your desired folder

Step 3: Create a sample demo page. e.g "demo.html"

put this code on demo.html inside the <head>

<!-- Important file to include: CSS & JS file -->

<link rel="stylesheet" href="youtube_autocomplete.css" />

<script src="youtube_autocomplete.js"></script>

<!-- Calling the autocomplete -->

``

Step 4: Add an id "youtube_ac" on your search box e.g

<input type="text" id="youtube_ac">

voila! you are now using this auto complete on your website :)