Google Alphabet

by afarris

HTML

<div id="results">
<!--change the div IDs for different results-->
<h1>Google Autocomplete</h1>
    <p>
       Google's top autocomplete result for characters or numbers
    </p>
     <h2>Common Words</h2>
    <p id="time"></p>
    <p id="person"></p>
    <p id="year"></p>
    <p id="way"></p>
    <p id="day"></p>
    <p id="the"></p>
    <p id="of"></p>
    <p id="and"></p>
    <p id="to"></p>
    <p id="in"></p>
    <h2>Alphabet</h2>
    <p id="A"></p>
    <p id="B"></p>
    <p id="C"></p>
    <p id="D"></p>
    <p id="E"></p>
    <p id="F"></p>
    <p id="G"></p>
    <p id="H"></p>
    <p id="I"></p>
    <p id="J"></p>
    <p id="K"></p>
    <p id="L"></p>
    <p id="M"></p>
    <p id="N"></p>
    <p id="O"></p>
    <p id="P"></p>
    <p id="Q"></p>
    <p id="R"></p>
    <p id="S"></p>
    <p id="T"></p>
    <p id="U"></p>
    <p id="V"></p>
    <p id="W"></p>
    <p id="X"></p>
    <p id="Y"></p>
    <p id="Z"></p>
    <h2>Numbers</h2>
    <p id="1"></p>
    <p id="2"></p>
    <p id="3"></p>
    <p id="4"></p>
    <p id="5"></p>
    <p id="6"></p>
    <p id="7"></p>
    <p id="8"></p>
    <p id="9"></p>
    <p id="10"></p>
</div>

CSS

body {
	    font-family: Arial, Helvetica, sans-serif;
	}
	#results {
	    width:1024;
	    margin-left:auto;
	    margin-right:auto;
	    text-align:center;
	}
	#results p {
	    margin: 2px;
	    padding:0px;
        font-style:italic;
	}
	#results > p a {
	    text-decoration:none;
        font-style:normal;
	}
    #results b {
        font-weight:normal !important;    
    }

JavaScript

$(document).ready(function () {
    $("#results > p").each(function (index) {
        var divId = $(this).attr('id');
        callGoogle(divId);
    });

    autoCompleteCallBack = function (data) {
        var key = "#" + data[0];
        var keyValue = data[0];        
        var value = data[1][0][0];
        //remove bold tag from results
        value = value.replace("<b>","");
        value = value.replace("<\/b>","");
        value = keyValue + " <a target=\"_blank\" href='http:\/\/www.google.com\/search?q=" + value + "'>" + value + "<\/a>";
        $(key).append(value);
    }
})

function callGoogle(searchString) {
    $.getJSON("http://suggestqueries.google.com/complete/search?callback=?", {
        "hl": "en",
            "jsonp": "autoCompleteCallBack",
            "q": searchString,
            "client": "psy"
    });

}