Google Suggest

Google Auto Suggest Test

HTML

<form id="suggest">
    <ul>
        <li>
            <label>Suche:</label>
            <input name="q" value="" />
        </li>
        <li>
            <input type="submit" value="Search" />
        </li>
    </ul>
</form>
<ol id="response"></ol>
<div id="mydebug"></div>

CSS

#response {
    margin:4px 16px;
    padding:6px 24px;
    background:#FFFFAA;
}
#mydebug {
    margin:4px;
    padding:6px;
    background:#CCCCCC;
}

JavaScript

function showsug(data) {
    $('#mydebug').text(JSON.stringify(data));

    names = data[1];
    $('#response').empty();

    $.each(names, function (key, value) {
        $('#response').append('<li> <a href="#' + value + '"  title="' + value + '">' + value + '</a></li>' + "\n");
    });
}

jQuery('#suggest').on('keyup', function (e) {
    e.preventDefault();
    var params = {
        "hl": 'de',
            "q": this.q.value,
            "client": "firefox"
    };
    jQuery.getJSON("http://google.de/complete/search?callback=?", params, showsug);

});