JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<input type="text" name="search_value" id="yt_search_value">
<div id="suggest"></div>

JavaScript

var combined=[];
$(document).ready(function(){
    $("#yt_search_value").keyup(function(e){
        $(this).html("");
        $.getJSON("http://suggestqueries.google.com/complete/search?q="+$("#yt_search_value").val()+"&client=chrome&callback=?",function(data1){
            $.getJSON("https://www.googleapis.com/freebase/v1/search?query="+$("#yt_search_value").val()+"&limit=3&encode=html&callback=?",function(data2){
                for(var key in data1[1]){
                    if(data1[4]["google:suggesttype"][key]=="NAVIGATION"){
                        combined.push("<li rel='"+data1[4]["google:suggestrelevance"][key]+"'><a href='"+data1[1][key]+"'>"+data1[2][key]+"</a></li>");
                    }else{
                        combined.push("<li rel='"+data1[4]["google:suggestrelevance"][key]+"'>"+data1[1][key]+"</li>");
                    }
                }
                for(var key in data2.result){
                    combined.push("<li rel='"+Math.round(data2.result[key].score*5)+"'> Freebase: "+data2.result[key].name+"</li>");
                }
                combined.sort(function(a,b){
                    return +$(b).attr("rel")-+$(a).attr("rel");
                });
                $("#suggest").html(combined.slice(0,5).join(""));
                combined=[];
            });
        });
    });
});