Custom Search - "Clear button" for results.

[Jim]

Hi,

Recently, I added google custom search to my site.
However it does not show a clear button in the results.
Was wondering if there is a draw option for this.

If you go to this blog
http://googlecustomsearch.blogspot.com/
The search for the blog itself has a clear button(a small "x") in the
results.
However the developer has used google search widget. Not custom
search.
I would like a similar "clear button 'x'" to be drawn in my results.
Could not find a draw option for this.

The link below has the same features as my search(It is not my site):
http://ajax-apis.appspot.com/cse-less-style

function triggerGoogleSearch()
My code:
{
google.load('search', '1');
//Google Branding
google.search.Search.getBranding(document.getElementById("branding"));
// Create a Custom Search control that uses a CSE restricted to
code.google.com
// Change the customSearchId string to the ID of your own Custom
Search engine.
var customSearchControl = new google.search.CustomSearchControl
('xxxx');
//open search links clicked in same window
customSearchControl.setLinkTarget
(google.search.Search.LINK_TARGET_SELF);
//Set drawing options to use my text box as input instead of having
the library create one.
var drawOptions = new google.search.DrawOptions();
drawOptions.setInput(document.getElementById('query_input'));
//Draw the control in content div
customSearchControl.draw('results', drawOptions);
google.setOnLoadCallback(onLoad);
}

Thanks, Its probably something small, but has been bugging me for a
while, don't want to upload the search feature to my site without it
having
the clear search button.

Appreciate any help!

Regards,
Jim.

[Jeff S (Google)]

Hi Jim,

I recently worked on a sample where we used control.setSearchCompleteCallback to add a small x to clear the results by adding new nodes to the DOM after the searches are completed. You can see the code here

http://en.wikipedia.org/w/index.php?title=User:Jscud/vector.js&action=raw&ctype=text/javascript&dontcountme=s

(We talked about it in greater detail in this blog post: http://googlecustomsearch.blogspot.com/2009/10/contextual-search-experience-for.html )

There is more than one way to do this, but would the above example work for what you are trying to do?

Thank you,

Jeff

[Jim]

Hi Jeff,

Thank you for taking the time to reply.

To put it quite simply, your solution blew right over my head :).

I have written a small jquery code, to implement the search more
efficiently.
function search(){
var d=new google.search.DrawOptions();
var c=new google.search.CustomSearchControl("xxx");
c.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
c.setNoResultsString("Sorry! We could not find what you are looking
for.");
d.setInput(document.getElementById("query_input"));
c.draw(document.getElementById("results"),d);
}
$.getScript("http://www.google.com/jsapi",function(){google.load
("search","1",{callback:search});});

I don't know how to hook, or send the control back, once a search is
initiated. This code loads
once the page is loaded, and then the search field is then ready for
input.
There is no button(so cannot send control back to the script using the
button).

The only way, in my limited knowledge on the api, is to write/draw a
close button alongside the results.
In the tabs area.

However you have given me a good hint about the class that draws it,
will rack my brain some more and try,
Please do let me know if there is a easier way.

Thank you,
Jim.

On Oct 28, 1:58 am, "Jeff S (Google)" <j...@google.com> wrote:
> Hi Jim,
>
> I recently worked on a sample where we used
> control.setSearchCompleteCallback to add a small x to clear the results by
> adding new nodes to the DOM after the searches are completed. You can see
> the code here
>

> http://en.wikipedia.org/w/index.php?title=User:Jscud/vector.js&action...
>
> (We talked about it in greater detail in this blog post:http://googlecustomsearch.blogspot.com/2009/10/contextual-search-expe...)

[Jim]

Jeff,

Thanks a ton!
Managed to do it!
Have a great weekend!

Just sharing the code here in case anyone else needs the same solution.
( Jquery Google Ajax Search Api )
===================================================================
var added=false;
function search(){
var gcscPostSearch = {};
gcscPostSearch.uiAddOn = function() {
if(!added)
{
$("#results").prepend("<div class='clearsearch'>Clear Search / Close</
div>");
added=true;
}
$("#results .gsc-results").css('font-family','Arial,Helvetica,sans-
serif')
.css('border-left','1px solid #D4E0F2')
.css('border-top','1px solid #D4E0F2')
.css('border-right','1px solid #D4E0F2')
.css('border-bottom','1px solid #D4E0F2')
.css('padding','10px 0 10px 10px');
$("#results .clearsearch").css('border-left','1px solid #D4E0F2')
.css('border-top','1px solid #20387D')
.css('border-right','1px solid #20387D')
.css('border-left','1px solid #20387D')
.css('border-bottom','1px solid #20387D')
.css('background','#D4E0F2')
.css('padding','5px 5px 5px 5px')
.css('cursor','pointer')
.css('float','right');
$("#results .clearsearch").click(function(){triggerGoogleSearch();})
};

var d=new google.search.DrawOptions();
var c=new google.search.CustomSearchControl("xxx");
c.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
c.setNoResultsString("Sorry! We could not find what you are looking
for.");

c.setSearchCompleteCallback(gcscPostSearch, gcscPostSearch.uiAddOn);

d.setInput(document.getElementById("query_input"));
c.draw(document.getElementById("results"),d);
}
$.getScript("http://www.google.com/jsapi",function(){google.load
("search","1",{callback:search});});

===============================================================================

in the above code, triggerGoogleSearch() is a method written
specifically, to reset google search.

Cheers,
Jim.

[Jeff S (Google)]

Hi Jim,

Very cool, glad you got it and thanks for sharing :)

Happy coding,

Jeff

[Jim]

Hey,

Incase anyone wants to go to a working example of the code:

http://www.jobstriker.com

Ps: anxiously awaiting for "Google Wave" :D

Regards,
Jim.

On Nov 3, 4:23 am, "Jeff S (Google)" <j...@google.com> wrote:
> Hi Jim,
>

[Olaf Lederer]

Hello Jim,

nice example, but your site's content is moved down and is not
replaced by the results.
Do you think it's possible using the Ajax CSE?

regards
Olaf

[Jeremy Geerdes]

Using the "Custom Search Control" designed by the Custom Search Engine
team to put the results in an overlay on the page, I don't think it
is. In fact, I don't think you'll be able to use a default Search
Control, either. You'll need to build your own custom control. It's
really not all that complex to do if you have a little basic knowledge
of Javascript and HTML. And if you need help, we would be glad to help
you out live in the IRC channel. For information on the IRC channel,
check out this thread:

http://groups.google.com/group/google-ajax-search-api/browse_thread/thread/ccbcf6c42d5a78bc

Jeremy R. Geerdes
Effective website design & development
Des Moines, IA

For more information or a project quote:
http://jgeerdes.home.mchsi.com
http://jgeerdes.blogspot.com
http://jgeerdes.wordpress.com
jgee...@mchsi.com

Unless otherwise noted, any price quotes contained within this
communication are given in US dollars.

If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!

And check out my blog, Adventures in Web Development, at http://jgeerdes.blogspot.com
!

[Jim]

Hi Olaf,

Thank you, glad you liked the way I implemented the Api using jquery.

It is possible to replace the content with the search, using some
simple tricks.
Now, the question arises, if your users are done searching and clear
the search
now you would want the original content of the page back.
So well how you going to do it?
One solution is to save the content from your main div(which holds all
your content)
into a variable, and place it in a session/cookie.
It will have all the tags, and on clicking the clear button it would/
should
write all your content back from that variable into your content div.

I should, add this method is heavy on resources, if you noticed
http://www.jobstriker.com has a translation feature, in which
pages can be translated.

I have written code to save the translated language into a cookie,
so when the user goes to the next page, the language of that page
starts to get translated to the preferred language.

You can try JQuery cookie fuction, to store stuff.

My point is in doing this, when I look at the cache of any browser
(where all the
temporary files are stored, including cookies), I have a lot of stuff
generated.

Your main design , in my humble opinion should be your focus.
What would your users prefer...you could simply use a separate page
all together
for search and have a link of it at the top of your page.

So all your users, if ever they want to search, they just have to
click the link and
go search.

I've not used that approach, coz, users sometimes think its too much
trouble.
i.e too many clicks to get what they want. So I kept it simple, as I
can.
Search/clear translate, browse, and no page reload for any of it, its
all
shown in one place. provided you have patience :) .

The new approach towards the "GREAT" developers who create browsers is
finding hot spots and loading them first, so in Google Chrome, or
Mozilla, or Safari
http://www.jobstriker.com will load faster than in other browsers as
other browsers read
each and every line of code before "doing" anything. I love Chrome,
because its a "Smart"
browser.

Anyway, im getting off topic...lol :) ...In a nutshell, i developed
Jobstriker.com
with a more futuristic approach...

If your using Google Ajax Api, not necessarily jquery, then this would
be your approach,
otherwise if your anyway, going to go to another page, you can use any
other, google custom
search solution.

I feel the guys at google came out with the ajax api, so as to not
reload/redirect, and just show
results on the same page.

Cheers,
Jim.


On Nov 3, 12:39 pm, Olaf Lederer <olaf.lede...@gmail.com> wrote:
> HelloJim,

>
> nice example, but your site's content is moved down and is not
> replaced by the results.
> Do you think it's possible using the Ajax CSE?
>
> regards
> Olaf
>

> On Nov 3, 3:23 am,Jim<goreansp...@gmail.com> wrote:
>
>
>
> > Hey,
>
> > Incase anyone wants to go to a working example of the code:
>
> >http://www.jobstriker.com
>
> > Ps: anxiously awaiting for "Google Wave" :D
>
> > Regards,
> >Jim.
>
> > On Nov 3, 4:23 am, "Jeff S (Google)" <j...@google.com> wrote:
>
> > > HiJim,
>
> > > Very cool, glad you got it and thanks for sharing :)
>
> > > Happy coding,
>
> > > Jeff
>

> > > On Sat, Oct 31, 2009 at 1:23 AM,Jim<goreansp...@gmail.com> wrote:
>
> > > > Jeff,
>
> > > > Thanks a ton!
> > > > Managed to do it!
> > > > Have a great weekend!
>
> > > > Just sharing the code here in case anyone else needs the same solution.

> > > > (JqueryGoogle Ajax Search Api )

> > > > On Oct 31, 8:59 am,Jim<goreansp...@gmail.com> wrote:
> > > > > Hi Jeff,
>
> > > > > Thank you for taking the time to reply.
>
> > > > > To put it quite simply, your solution blew right over my head :).
>

> > > > > I have written a smalljquerycode, to implement the search more

[Jim]

Hi Olaf,

Thanks for the "food for thought".
You can visit www.jobstriker.com again, the functionality you thought
of is implemented.It is simpler than I thought using JQuery. Was just
busy all day job hunting. Man's got to eat, right lol :)

Anyway, dont want to give you the run around so here goes, i dont have
a blog(or want one ;)) or anything and I dont know the depth of how
much you know about html, javascript so im just going to comment my
code to walk you through it, instead of documenting it.

Please do let me know if there is any more clarification needed.

The below code works with JQuery so, if you wish to use vanilla
javascript, this will not work.
hmm. so lets get to it then :)

//Variable boolean value to show/hide close(x) box initialized to
false
var added=false;
function search()
{
//Callback function required by google class--to be called at the end
of a search
var gcscPostSearch={};
gcscPostSearch.uiAddOn=function()
{//checking the above initialized variable's value which is false
the first time
if(!added)
{
//prepending the close button top of the results
$("#results").prepend("<div class='clearsearch'><span
class='navigation_style'>Clear Search / Close (x)</span></div>");
//changing the set value ot the variable to prevent it from getting
written again in the case of multiple search
added=true;
}
//Here - Olaf is how the content div gets hidden
$('#content').hide();
//style for the results -- specific to my site jobstriker.com ,
obviously change it to suit your needs.

$("#results .gsc-results").css("font-family","Arial,Helvetica,sans-
serif")
.css("border-left","1px solid #D4E0F2")
.css("border-top","1px solid #D4E0F2")
.css("border-right","1px solid #D4E0F2")
.css("border-bottom","1px solid #D4E0F2")
.css("padding","10px 0 10px 10px");

$("#results .gsc-result:link").css("text-decoration","none");
$("#results .gsc-result:hover").css("text-decoration","none");
$("#results .gsc-result:visited").css("text-decoration","none");
$("#results div.gs-visibleUrl.gs-visibleUrl-long").css
("display","none");
$("#results div.gs-visibleUrl.gs-visibleUrl-short").css
("display","none");
$("#results div.gsc-trailing-more-results").css("display","none");
$("#results div.gsc-tabHeader.gsc-tabhActive").css
("display","none");
$("#results .gsc-resultsHeader").css("display","none");
$("#results .gsc-tabsArea").css("display","none");
//styling the clear search button/box

$("#results .clearsearch").css("border-left","1px solid #D4E0F2")

.css("background","#D4E0F2").css("padding","3px 3px 3px 3px")
.css("cursor","pointer").css("float","right");
//here olaf is where we show the content again on click of the close
button
$("#results .clearsearch").click(function(){$('#content').show
(),triggerGoogleSearch();});};
//google stuff :)
var d=new google.search.DrawOptions();
//get a key for your website and place it instead of
YOUR_KEY_GOES_HERE
var c=new google.search.CustomSearchControl("YOUR_KEY_GOES_HERE");
//opens links from the search results in the same window
c.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
//Specify what you want your visitors to read when there are no
results to display

c.setNoResultsString("Sorry! We could not find what you are
looking for.");

//calls the method on google search completion - thanks to Jeff
c.setSearchCompleteCallback
(gcscPostSearch,gcscPostSearch.uiAddOn);
//the input field on your website
d.setInput(document.getElementById("query_input"));
//specify the results div --where results of your search are shown
c.draw(document.getElementById("results"),d);}
//calls googles ajax api

$.getScript("http://www.google.com/jsapi",function(){google.load
("search","1",{callback:search});});

Basically that's it, I have even used jquery to write the input field,
so if a browser has javascript disabled the search box including the
box image, does not get created, nor does the translation.
So basically if you write the box using jquery your site will degrade
well...

//writes the image background of the search box, this is also specific
to my site
just a tip, so if a visitor goes to your site, with javascript
disabled, they wont see the
search box or image...its not hard coded, just generated.
$("#search_box").css({"background-image":"url(http://
www.jobstriker.com/images/bg_search_box.png)","background-repeat":"no-repeat","float":"right","margin-top":"25px","width":"201px","height":"31px"});
//writes the input field
$("#search_box").append(" <input type='text' value='Search'
id='query_input' style='float:left; padding:0; margin:6px 0 0 6px;
border:0; width:159px; background:none' />");
//simple focus on blur clears the "Search" value
$("#query_input").focus(function(){if(this.value==this.defaultValue)
{this.value="";}}).blur(function(){if(!this.value.length)
{this.value=this.defaultValue;}});

Hope this helps buddy, for working example, go to http://www.jobstriker.com

Cheers,
Jim.
Ps: No donation required lol, did you happen to see the ads on
jobstriker.com ;) hint! hint!

On Nov 5, 8:23 am, Jim <goreansp...@gmail.com> wrote:
> Hi Olaf,
>
> Thank you, glad you liked the way I implemented the Api using jquery.
>
> It is possible to replace the content with the search, using some
> simple tricks.
> Now, the question arises, if your users are done searching and clear
> the search
> now you would want the original content of the page back.
> So well how you going to do it?
> One solution is to save the content from your main div(which holds all
> your content)
> into a variable, and place it in a session/cookie.
> It will have all the tags, and on clicking the clear button it would/
> should
> write all your content back from that variable into your content div.
>

> I should, add this method is heavy on resources, if you noticedhttp://www.jobstriker.comhas a translation feature, in which

> Mozilla, or Safarihttp://www.jobstriker.comwill load faster than in other browsers as

> ...
>
> read more »