Google style AutoSuggest using Google Suggest jQuery

November 20, 2014 Jquery

Google style AutoSuggest using Google Suggest jQuery:

Google AutoSuggest using Google jquery Plugin used to display google style auto suggest, which increases the user interaction and help to increase the sales for online shopping websites. It will help user to identify what they are searching by providing related suggestions. It can be done using google autosuggest jquery js plugin.

Required Imports:

[plain]
<!– to display the related suggestion in google style –>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<!– jQuery google Suggest js Plugin –>
<script src="jquery.googleSuggest.js" type="text/javascript"></script>
[/plain]

jQuery Source:

[html]
<script>
           var div = $("<div style=\"text-align: center; margin-top: 45px;\">").appendTo("#inputs")
           , input = $("<input type=\"text\" id=\"txt\" name=\"q\" style=\"width:500px;height:27px;\"/> ").appendTo(div)
           ,span = $("<input type=\"button\" value=\"Search\" onclick=\"checkInput()\" style=\"float:right;position: absolute;padding: 5px 27px;\"/>").appendTo(div)   ;
           input.googleSuggest({ service: "products" });
       </script>
[/html]

We have provided the service as products. So it will list down/suggest the related products with your search term.

Full Source code:

[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Google style AutoSuggest using Google Suggest jQuery plugin Example – Javadomain.in</title>
<!– to display the related suggestion in google style –>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<!– jQuery google Suggest js Plugin –>
<script src="jquery.googleSuggest.js" type="text/javascript"></script>
<script>
function checkInput(){
var input = $("#txt").val();
if(input.length != 0){
alert("You have Entered: "+input);
}else{
alert("Please Type something and Press Search");
}
}
</script>
</head>

<body>
<div id="container" style="margin-top:5%;">
<span id="search_txt" style="">
<form action="" method="get" id="form">
<div id="inputs"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.googleSuggest.js" type="text/javascript"></script>
<script>
var div = $("<div style=\"text-align: center; margin-top: 45px;\">").appendTo("#inputs")
, input = $("<input type=\"text\" id=\"txt\" name=\"q\" style=\"width:500px;height:27px;\"/> ").appendTo(div)
,span = $("<input type=\"button\" value=\"Search\" onclick=\"checkInput()\" style=\"float:right;position: absolute;padding: 5px 27px;\"/>").appendTo(div) ;
input.googleSuggest({ service: "products" });
</script>
</form>
</span>
</div>
</body>
</html>

[/html]

Output:

jQuery Recommended Books:

Google style AutoSuggest using Google Suggest jQuery