How to install a Google search box with suggest on MediaWiki?

Question

I have found several extensions for MediaWiki which allow you put a Google search box for searching the web on your MediaWiki site. However, none of them seem to have an option to enable suggest, which populates a drop down menu of possible search terms based on what the user has typed in so far. How can I do this?

I posted this to Stackoverflow, because the solution will most likely require programming.

FYI, the existing extensions I found are: - http://www.mediawiki.org/wiki/Extension:GoogleSiteSearch - http://www.mediawiki.org/wiki/Extension:Google

Answer 1

First you need to add a new file to your mediawiki installation. Just call it googleSuggest.php. You need this file because of cross-domain issues with browser web security (you can thank the browser developers)

Add the following code to it:

<?php
$q = strtolower($_GET["q"]);
if (!$q) return;

$url="http://suggestqueries.google.com/complete/search?qu=".$q;
$text = file_get_contents($url); //Get content from Google suggest
$text=str_replace("window.google.ac.h([\"$q\",[[","",$text); //Remove unwanted portion
$arr_items=explode("],[",$text); //Split and put it in arrary
foreach($arr_items as $items)
{            $arr_item=explode(",",$items);
            $key=$arr_item[0]; //Get the keyword, the arrary will have other details such as no.of resutls also.
            $key=trim($key,"\""); //Use to remove quotes
        if (strpos(strtolower($key), $q) !== false) {
            echo "$key\n";
        }

}
?>

Then you will need to download jquery from jQuery.com Then you will need to get this plugin:http://docs.jquery.com/UI/Autocomplete

Then you will need to edit the head section. Add the following lines.

<script type="text/javascript" src="PATHTOJQUERY.JS"></script>
<script type='text/javascript' src='PATHTOjquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="PATHTOjquery.autocomplete.css" />

<script type="text/javascript">
var keywords=['qualitypoint','qpt','quality','one','two'];
$().ready(function() {


    $("#q").autocomplete("googleSuggest.php", {
        width: 260,
        selectFirst: false
    });

    $("#q").result(function(event, data, formatted) {
        if (data)
            $(this).parent().next().find("input").val(data[1]);
    });


});</script>

Then, where you want the web search:

    <form method="get" action="http://google.com/search" autocomplete="off" >
        <p>

            <input type="text" id="q" />
<input type="submit" value="Google Search" />

        </p>
    </form>