Google Autocomplete Keyword Suggestions in form Text Field

Authors: CodeToday | Search Engine (Google, Bing) | Views: 1222 | Posted: 03 AM: 09/12/2017

Google’s Autocomplete feature provides keyword search suggestions as you type to save you time when you’re typing a common query. the suggestions are determined algorithmically.

For example: When you enter "Google ..." this tool will suggest "google autocomplete ...", but it is on the search engines

This article will guide you to use google autocomplete keyword suggestions directly on your website

The libraries needed in this article include:
CSS: 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

JS:

<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type = "text/javascript" src = "autoSearch.js"></script> // This file code you can see below

autoSearch.js

var suggestCallBack; // global var for autocomplete jsonp
$(document).ready(function () {
    $("#search").autocomplete({
        source: function(request, response) {
            $.getJSON("http://suggestqueries.google.com/complete/search?callback=?",
                {
                  "hl":"en", // Language
                  "ds":"", // Restrict lookup to youtube
                  "jsonp":"suggestCallBack", // jsonp callback function name
                  "q":request.term, // query term
                  "client":"youtube" // force youtube style response, i.e. jsonp
                }
            );
            suggestCallBack = function (data) {
                var suggestions = [];
                $.each(data[1], function(key, val) {
                    suggestions.push({"value":val[0]});
                });
                suggestions.length = 10; // prune suggestions list to only 5 items
                response(suggestions);
            };
        },
    });
});

If you want to use google keyword suggestions in another language you need to change attribute ( "hl":"en" ) in autoSearch.js 

Listing Language Codes by Country

hl=ru          Russian                   hl=tt          Tatar

hl=gd          Scots Gaelic           hl=te          Telugu

hl=sr          Serbian                   hl=th          Thai

hl=sh          Serbo-Croatian           hl=ti          Tigrinya

hl=st          Sesotho                   hl=to          Tonga

hl=tn          Setswana           hl=lua         Tshiluba

hl=crs         Seychellois Creole         hl=tum         Tumbuka

hl=sn          Shona                  hl=tr          Turkish

hl=sd          Sindhi                  hl=tk          Turkmen

hl=si          Sinhalese          hl=tw          Twi

hl=sk          Slovak                  hl=ug          Uighur

hl=sl          Slovenian          hl=uk          Ukrainian

hl=so          Somali                  hl=ur          Urdu

hl=es          Spanish          hl=uz          Uzbek

hl=es-419      Spanish (Latin American) hl=vi          Vietnamese

hl=su          Sundanese           hl=cy          Welsh

hl=sw          Swahili                   hl=wo          Wolof

hl=sv          Swedish           hl=xh          Xhosa

hl=tg          Tajik                   hl=yi          Yiddish

hl=ta          Tamil                   hl=yo          Yoruba

HTML Source Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google Autocomplete Keyword Suggestions in form Text Field</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type = "text/javascript" src = "autoSearch.js"></script>
</head>
<body>
<div class="container">
<h1>Google Autocomplete Keyword Suggestions in form Text Field</h1>
<form id="tfnewsearch" method="POST" action="" class="form-inline">	
<div class="form-group">			
<input name="keyword" id="search" size="80" class="form-control" placeholder = "Enter keyword for suggest now ..." required>
</div>
<div class="form-group">
<button class="btn btn-info" type="submit" name = "SearchDomain"><i class="glyphicon glyphicon-search"></i> Search Now</button>
</div>
</form>
</div>
</body>
</html> 
After completing the above steps and try the keyword "google search" you will see the picture below

Google Autocomplete Keyword Suggestions in form Text Field

In addition you can use file_get_contents or curl_init () to get your website directly in the following link:
http://suggestqueries.google.com/complete/search?client=firefox&q=[your keyword]

If you have any questions, please leave a message below

PHUONGNT

very good!!!

Posted: 09/22/2017