You are aware that as you type in the google search box on Google Web Search , Google’s autocomplete algorithm offers searches that might be similar to the one you’re typing.
Google’s idea behind this is as you type, Google’s algorithm predicts and displays search queries based on other users’ search activities. All of the predicted queries shown have been typed previously by other Google users. The autocomplete dataset is updated frequently to offer fresh and rising search queries.
Most of the times google suggest gives you exactly what you are looking for which saves your time. for me it appears 80% accurate. and more than that if you are looking for some technical thing then its 98% accurate.
My intention behind to tell you all this ramayan is that i love Google suggest and it’s blocked in my office (i dont know which firewall they use and whats wrong they find in google suggestions
To find alternative way for this i googled and found google’s api for google suggest. google has offered api http://google.com/complete/search?q=hello which returns the suggestions
To integrate this feature on google search page there was no other option than Greasemonkey and Greasemonkey Firefox addon. I started working on it and here i am presenting my first Greasemonkey user script.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 |
/* Google Suggest Copyright (c) 2010, Amit Patil https://amitpatil.me Released under the GPL license http://www.gnu.org/copyleft/gpl.html -------------------------------------------------------------------- This is a Greasemonkey user script. To install, you need Greasemonkey: http://greasemonkey.mozdev.org/ Then restart Firefox and revisit this script. Under Tools, there will be a new menu item to "Install User Script". Accept the default configuration and install. To uninstall, go to Tools/Manage User Scripts, select "Google Suggest", and click Uninstall. -------------------------------------------------------------------- */ // ==UserScript== // @name Google Suggest // @version 1.0 // @description Displays suggestions when you start typing in google search // @include http://www.google.co.in/* // @require http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js // ==/UserScript== (function () { // add style to the list addGlobalStyle(' body{font-family:verdana;font-size:14px;} .list {list-style:none;margin:0px;padding:0px;} .list li{width:100%;border-color:#CCCCCC;border-style:solid;border-width:0 1px 1px;height:28px;} .list li a{display:block;color:black;text-decoration:none;padding:5px 5px !important;cursor:pointer;} .selected{background:#678FD6;border:1px solid #5F5F5F;} .selected span{background:#678FD6;color:white;} '); // create empty list and attach to DOM offset = $("input[title='Google Search']").offset(); $("<div id='suggestions'>").appendTo("body") .css("background","#eeeeee") .css("width",$("input[title='Google Search']").width()+13) .css("position","absolute") .css("top",offset.top + $("input[title='Google Search']").height()+6) .css("left",offset.left) .css("border-top","1px solid #CCCCCC") .css("height","auto") .fadeTo("slow","0.8"); $(".lst").keyup(function(event){ var str = $(".lst").val(); if(str.length) { if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13) { // this is the Greasemonkey's way to make a Ajax call GM_xmlhttpRequest({ method: "GET", url: "http://google.com/complete/search?output=toolbar&q="+str, headers: { "User-agent": "Mozilla/4.0 (compatible) Greasemonkey", "Accept": "application/atom+xml,application/xml,text/xml", }, onload: function(responseDetails) { // clear previous result $("#suggestions").html(" <ul class="list">"); i = 0; $(responseDetails.responseText).find("CompleteSuggestion").each(function(){ data = $(this).find("suggestion").attr("data"); data = data.replace(str,"<strong>"+str+"</strong>"); if(i < 15) $(".list").append(" <li><a>"+data+"</a>"); i++; }); $("#suggestions").append("</li> </ul> "); } }); } else { // code to handle up and down button keystrokes $("li .selected").removeClass("selected"); switch (event.keyCode) { case 40: { found = 0; $("li").each(function(){ if($(this).attr("class") == "selected") found = 1; }); if(found == 1) { var sel = $("li[class='selected']"); // check if his is a last element in the list // if so then add selected class to the first element in the list if(sel.next().text() == "") $("li:first").addClass("selected"); else sel.next().addClass("selected"); // remove class selected from previous item sel.removeClass("selected"); // set value in textbox } else $("li:first").addClass("selected"); $("input[title='Google Search']").val($("li.selected").text()); } break; case 38: { found = 0; $("li").each(function(){ if($(this).attr("class") == "selected") found = 1; }); if(found == 1) { var sel = $("li[class='selected']"); // check if his is a last element in the list // if so then add selected class to the first element in the list if(sel.prev().text() == "") $("li:last").addClass("selected"); else sel.prev().addClass("selected"); // remove class selected from previous item sel.removeClass("selected"); } else $("li:last").addClass("selected"); $("input[title='Google Search']").val($("li.selected").text()); } break; case 13: $("#suggestions").trigger("click"); break; } } } else $("#suggestions").html(""); }); // hide list contents on enter key press $(document).keydown(function(event){ if(event.keyCode == 13) $("#suggestions").html(""); }); // code to handle mouseover event $("#suggestions").mouseover(function(){ $(this).find("li").hover( function() { $(this).addClass("selected") }, function() { $(this).removeClass("selected") } ); }); $("#suggestions").click(function(){ var data = $(this).find("li.selected").html(); data = data.replace("<a>",""); data = data.replace("</a>",""); data = data.replace("<strong>",""); data = data.replace("</strong>",""); $("input[title='Google Search']").val(data); $("#suggestions").html(""); $("input[value='Google Search']").trigger("click"); }); // bind DOM click event to ul element which is added at runtime $("ul").live("click",function () { var text = $(this).text(); $("input[title='Google Search']").val(text); }); })(); function addGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) { return; } style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style); } |
Dear sir,
This side sumit gupta from chandigarh i am making my website and not getting the idea “how to make search engine in php with ajax” please do help me….
Its not easy to explain it in just few words, There are lot of articles on google you can find, and they will be much descriptive too.