Google Auto Complete

by Derek Leung

HTML

<input><button>search</button>
<div id="list"></div>

CSS

#list{
    width: 300px;
    border: 1px solid black;
}
#list > div:hover{
    background: #EEE;
    cursor: pointer;
}

JavaScript

$("input").keyup(function(){
    $.ajax({
        url: "http://suggestqueries.google.com/complete/search",
        dataType: "jsonp",
        data: {
            client: "chrome",
            q: $("input").val()
        }
    }).done(function(data){
        $("#list").empty();
        var list = data[1],
            type = data[4]["google:suggesttype"];
        $(list).each(function(i){
            var entry = this;
            $("<div>")
                .text(entry + " (" + type[i] + ")")
                .appendTo("#list")
                .data("query", entry).click(function(){
                    openInGoogle($(this).data("query"));
                });
        });
    });
});

$("button").click(function(){
    openInGoogle($("input").val());
});
$("input").keydown(function(e){
    if(e.keyCode === 13){
        openInGoogle($("input").val());
    }
});

function openInGoogle(query){
    window.open("http://www.google.com/#q=" + encodeURIComponent(query), "blank");
}