--Niniel EU-Kilrogg --Niniel EU-Kilrogg

Swiftmend

Nurture strength of spirit to shield you in sudden misfortune.

2005-07-14

Google search web part for Content Editor in SharePoint

This is an example of some code which I have written for a Google Search Web Part. We are using it in our Sharepoint Intranet at work.

I wrote this quite long ago but I've just created this blog so I thought I might as well post about something useful.

I know Mark Wagner has written a real Google Search web part but my code is actually not a web part per se. You just have to copy the code below into the source view of a Content editor web part. For people who are not so comfortable with .cab file and stsadm.exe this might be an option.

It also has got an auto-focus on the search field which is kind of nice.
Please let me know if you find an error with this code. I'm always eager to learn. Also be indulgent with the indentation, I couldn't preserve it when publishing it here.

Copy the following into a Content Editor Web part:

<script type="text/javascript">
<!--
function postform() {
var oElement = document.getElementById("q");
window.open("http://www.google.com/search?q=" + oElement.value,
"_blank", "width=600, height=600, menubar=yes, resizable=yes, scrollbars=yes, status=yes, titlebar=yes, toolbar=yes, location=yes, top=140, left=260");
}
-->
</script>

<!-- Search Google -->
<div id="SearchGoogle">
<a href="http://www.google.se/" target="_blank">
<img src="URL to Google Image.gif" border="0" alt="Google" align="absmiddle" /></a>
<input type="text" id="q" name="q" size="15" maxlength="255" onkeydown="javascript:if (event.keyCode == 13) postform();" value=""> 
<input type="button" name="btnG" VALUE="Search" onClick="postform();">
</div>

<script type="text/javascript">
<!--
// save original function
if(document.body.onload) {
original = document.body.onload;
}
// override original function
document.body.onload= document_onLoad;

function document_onLoad() {
try {
var oElement = document.getElementById("q");
oElement.focus();
}
catch(e){}

// call original function
original();
}

function original() {
// do nothing if original is null
}
-->
</script>

6 comments:

Anonymous said...

Nice thing odd named blogger :-)
The blog reader community is now eagerly waiting for your next article on autogenerating pdf forms from a db with some clever mime spoofing and fdf stuff

//duderz

Anonymous said...

Hiya,

That's a great HTML code, thank you.

I too am using WSS as a company intranet. Is it possible to also search the sharepoint sites?

I visited Google's own customise option and added the http://companyweb/ fields, but this didn't work or at least returned 'no matches found'. Any ideas?

Kindest regards,
~ Paul

Johan Andersson said...

Hi Paul!

It's good to hear you had some use for my code.

I'm afraid I'm not familiar with googling an intranet.

Do you have a link to Googles customise option? Maybe if I had a look at it I might figure it out?

Best Regards
Johan

Graham said...

Hi Johan.

I'm very new to SharePoint and to web programming. I've copied your code into a Content Editor Web Part but when I use it I get "Error: 'q.value' is null or not an object". Almost certainly me doing something wrong. Any ideas?

Graham

Johan Andersson said...

Hello Graham!

Hmm, what web browser are you using and what version?

I tried copying the code into the Source Editor of a content editor on a SharePoint Area and it worked right off both with Internet explorer 6.0 and Firefox 1.0.

The error suggests that it's having trouble getting the value from the textbox. 'q' is just what I called the textbox as short for query.

When I think about it the attribute 'id' replaced the attribute 'name' in XHTML as mentioned on the following page:

XHTML syntax
.

The id attribute is used as a means to reference a particular element from a script so that might be why it's not working for you.
You can read more about it here: The global structure of an HTML document

Try adding the attribute id="q" to the input box as shown below or replace name="q" with it completely:

<input type="text" id="q" name="q" size="25" maxlength="255"
onkeydown="javascript:if (event.keyCode == 13) postform();" value="">

Having both id and name attributes in the same tag shouldn't be any problem as long as the values are the same.

Hope it helps!

// Johan;

grimbonewt said...

Thanks for your help Johan.

I'm using IE 6.0.2900.2180 (Win XP SP2).

Tried adding id="q", but it didn't help.

With a little help from a colleague who has used JavaScript more than I have, it seems within our SharePoint environment, there are 2 forms present and the Content Editor part is form[1], not form[0]. So, changed the code to refer to "document.forms[1]" and it all sprang into life. Had to remove the "document.forms[1].q.focus()" call, as it always pushed the Google window behind the SharePoint window.

Now it works fine and is an excellent little control. Thanks.

Graham