Getting suggestions from YouTube in a text field

Try: (Demo)

This is done using jQuery so we will have to include the jQuery library files. From where will we get the suggested queries for a query typed in a text field? We will get them from http://suggestqueries.google.com. We'll write a JavaScript file to get those queries which are in a form of XML. Let the name of the JS file be auto.js. Here it goes,

auto.js

$(document).ready(function(){$('#input').autocomplete({source:function(Query,Response){$.ajax({url:'http://suggestqueries.google.com/complete/search?client=youtube&ds=yt&q='+Query.term,dataType:'jsonp',success:function(Data){if(Data){var DataArr=Data.toString().split(',');var Queries=new Array();for(var q=1;q<(DataArr.length-1);q++){DataArr[q]=$.trim(DataArr[q]);if(0<DataArr[q].length&&DataArr[q]!='[object Object]'&&!$.isNumeric(DataArr[q])){Queries.push(DataArr[q]);}}if(0<Queries.length){Response(Queries);}}}});},delay:1000,minLength:2});});

Now, the HTML file will have the following code:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<input type="search" id="input" name="q" class="field" spellcheck="false" autofocus>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="auto.js"></script>