Google Suggest Autocomplete

by javajack

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css">
<form class="searchform cf">
  <input id="search" type="text" placeholder="Start typing a search term">
  <button type="submit">Search</button>
</form>

CSS

*,*:after,*:before {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}

body {
  background: #3aaae8;
  color: #fff;
  font:12px/18px 'HelveticaNeue', Helvetica, Arial, sans-serif;
}
a,a:visited {
  color:#fff
}

/*--------------------------------------------------------------
2.0 - SEARCH FORM
--------------------------------------------------------------*/
.searchform {
  background:#f4f4f4;
  background:rgba(244,244,244,.79);
  border: 1px solid #d3d3d3;
    left: 50%;
  padding: 2px 5px;
  position: absolute;
    margin: -22px 0 0 -170px;
    top: 50%;
  width:339px;
  box-shadow:0 4px 9px rgba(0,0,0,.37);
  -moz-box-shadow:0 4px 9px rgba(0,0,0,.37);
  -webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px
}

.searchform input, .searchform button {
    float: left
}
.searchform input {
    background:#fefefe;
    border: none;
    font:12px/12px 'HelveticaNeue', Helvetica, Arial, sans-serif;
    margin-right: 5px;
    padding: 10px;
    width: 216px;
    box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
  border-radius: 9px;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px
}
    .searchform input:focus {
        outline: none;
        box-shadow:0 0 4px #0d76be inset;
        -moz-box-shadow:0 0 4px #0d76be inset;
        -webkit-box-shadow:0 0 4px #0d76be inset;
    }
    .searchform input::-webkit-input-placeholder {
      font-style: italic;
      line-height: 15px
    }

    .searchform input:-moz-placeholder {
      font-style: italic;
      line-height: 15px
    }

.searchform button {
    background: rgb(52,173,236);
    background:...

JavaScript

var suggestCallBack; // global var for autocomplete jsonp

$(document).ready(function () {
    $("#search").autocomplete({
        source: function(request, response) {
            $.getJSON("http://clients1.google.com/complete/search?callback=?",
                { 
                  "hl":"en", // Language                  
                  "jsonp":"suggestCallBack", // jsonp callback function name
                  "q":request.term, // query term
                  "client":"psy", // force youtube style response, i.e. jsonp
                    "nolabels" : "f"
                }
            );
            var regex = /(<([^>]+)>)/ig; 
           
            suggestCallBack = function (data) {
                var suggestions = [];
                $.each(data[1], function(key, val) {
                    // bydefault google returns HTML, filter that to make plain text
                    var result = val[0].replace(regex, "");
                    suggestions.push({"value":result});
                });
                suggestions.length = 5; // prune suggestions list to only 5 items
                response(suggestions);
            };
        },
    });
});