search box on another page?

[nbierma]

I'd like to have search results at my website appear like this, in
tabs:
http://www.google.com/uds/samples/cse/index.html

But how do I connect this to the search box on my home page (not just
the search box on the search results page?)

The last paragraph of this section of the documentation says the
search box can be "decoupled":
http://code.google.com/apis/ajaxsearch/documentation/#SearchControlModes
and gives this example:
http://www.google.com/uds/samples/apidocs/searchformroot.html

But the box is still on the same page in that example. Possible to
draw from a search box on the home page instead?

Thank you,

Nathan Bierma
Grand Rapids, MI, USA
www.nbierma.com

[unkleE]

I was wanting to ask a similar question please. I wanted to have my
search box in the sidebar, and then show the results in the main part
of the page. I thought the best way would be to create a new page
especially for the search results, include the sidebar on that page,
and then leave the main section blank for the results. Pretty much the
same as Nathan wants to do. Is that logical?

Can anyone point me in the right direction please?

Thanks.

[nbierma]

Here's an expanded version of my question with some sample code:
http://bit.ly/gglcseq1 (see 4th reply). I think the key is getting the
results page to use the "q=" query variable. But I don't know how to
do it. Any advice appreciated.

Nathan

[Jeff S (Google)]

Hi Nathan,

I created a small sample page which I think might help. The first page
has a form which will send the user to a results page with q=the
user's query in the URL. The results page extracts the user's query
from the URL and feeds it into the custom search execute command. Hope
this helps, please let me know if any of this is confusing as I think
this might become a helpful example.

http://ajax-apis.appspot.com/html/two_page_search.html

Happy coding,

Jeff

On Mar 1, 6:07 am, nbierma <nbie...@gmail.com> wrote:
> Here's an expanded version of my question with some sample code:http://bit.ly/gglcseq1(see 4th reply). I think the key is getting the

[omr]

Thanks Jeff for posting that example.

In the Custom Search forum, some Custom Search Engine users have
requested such functionality since last year. So I had considered
posting essentially the same kind of solution that you've suggested
today. But I hesitated, because I wasn't quite certain if such an
implementation was permitted.

If such an implementation is permissible for use with CSEs, then I
wonder why such requested functionality has never before been
officially provided or documented for use with the AJAX Search API-
based Custom Search Element.

For years, Custom Search Engines have provided an option to host CSE
results within an Iframe on a separate results-page. That
implementation (which has some IMO significant known issues and
limitations, discussed many times in the current and archived CSE
forums) doesn't use the AJAX Search API.

Given the longtime existence of that option, and the desire for a
better alternative, I was disappointed to see that the AJAX Search API-
based Custom Search Element (using the Custom Search Control),
introduced last year, only supports (in its official implementations
and documentation) a single page, not a separate results-page.

So for the past few months I have been wondering why the CSE folks
chose not to provide a separate results-page option for the Custom
Search Element, using an implementation similar to what you have shown
in your example.

-- omr

[nbierma]

Perfect, thanks!!

I'd like the results to appear just the way they do at this sample
page from the AJAX API, with tabbed alternate searches on the right
side:
http://www.google.com/uds/samples/cse/index.html

I tried getting your example to do this but couldn't get it to work:

// draw the left and right controls
// the right control is drawn in tabbed mode
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

this.leftControl.draw(leftScDiv);
this.rightControl.draw(rightScDiv, drawOptions);

Can someone set me straight? Much appreciated,

Nathan

[Jeff S (Google)]

Hi omr,

Good questions. I think one of the challenges with a two page approach
like this is that it requires more work on the web developer's part
than an all-in-one-page-ajax solution. You would need to wire up page
1 to send the user to page 2. One of the things that I think our users
like about the custom search control is that it provides the results
to the end user without taking them off of the current page. For the
people who do want to user to go to another page, they are free to
build their own solutions as I've done.

Happy coding,

Jeff

[nbierma]

Jeff,

Thanks again for your helpful example.

As for your last post, I've found the code for using CSE on two pages
via an iframe very simple and straightforward: just a few lines of <
form > for our home page and a simple < iframe > on our results page,
so I don't think it makes it more complicated for web developers. And
for the user I think it's more intuitive to enter a search on a home
page and then land on a results page, the way they/we do on Google (or
Google Toolbar, via any page on the Web). Before you gave your
example, to use some cool Google AJAX API it would have to be on a
Search page that would just be linked from the home page, so a user
would have to click "Search" and then search, rather than just
entering a search on the home page, which is less seamless. So I do
think hooking up some of those AJAX search features with a two-page
option is very useful.

Speaking of which: As I posted above, I can't get your example to draw
tabbed results. Is there an easy way to do that?

Thanks,

Nathan

[Tim P]

Hi Jeff,

Great example! That's just what I was looking for. However, my
implementation (and your example, for that matter) does not work in
Internet Explorer. Now, I wish everyone in the world used FFox or
Chrome, but the fact is that there are still a bunch of people surfing
in IE.

Would you provide some advice on getting this operational in IE?

Thanks,
Tim

On Mar 1, 2:59 pm, "Jeff S (Google)" <j...@google.com> wrote:
> Hi Nathan,
>
> I created a small sample page which I think might help. The first page
> has a form which will send the user to a results page with q=the
> user's query in the URL. The results page extracts the user's query
> from the URL and feeds it into the custom search execute command. Hope
> this helps, please let me know if any of this is confusing as I think
> this might become a helpful example.
>
> http://ajax-apis.appspot.com/html/two_page_search.html
>
> Happy coding,
>
> Jeff
>
> On Mar 1, 6:07 am, nbierma <nbie...@gmail.com> wrote:
>

> > Here's an expanded version of my question with some sample code:http://bit.ly/gglcseq1(see4th reply). I think the key is getting the

[Tim P]

Aside from some formatting tweaks I've got this up and running on my
test site (http://69.20.59.228/).

But it doesn't work in IE 7 (Jeff's example doesn't work in IE7
either).

Does anybody have any ideas why that might be the case?

On Mar 1, 2:59 pm, "Jeff S (Google)" <j...@google.com> wrote:

> Hi Nathan,
>
> I created a small sample page which I think might help. The first page
> has a form which will send the user to a results page with q=the
> user's query in the URL. The results page extracts the user's query
> from the URL and feeds it into the custom search execute command. Hope
> this helps, please let me know if any of this is confusing as I think
> this might become a helpful example.
>
> http://ajax-apis.appspot.com/html/two_page_search.html
>
> Happy coding,
>
> Jeff
>
> On Mar 1, 6:07 am, nbierma <nbie...@gmail.com> wrote:
>

> > Here's an expanded version of my question with some sample code:http://bit.ly/gglcseq1(see4th reply). I think the key is getting the

[omr]

Change this:

if (parts[i][0] == 'q') {

to this:

if (parts[i].substr(0,1) == 'q') {

-- omr

[nbierma]

I got someone on experts-exchange.com to do the code for this:

http://nathanbweb.host22.com/try/search/search-example.html?q=sample
separate search box:
http://nathanbweb.host22.com/try/search/search-box.html

here's the pertinent code:
http://pastebin.com/D44WYzTn

and here's how I used it (with various CSE's) at my organization's
website:
http://www.calvin.edu/worship/search/results.html?q=lent
search box on our home page:
www.calvin.edu/worship

pertinent code:
http://pastebin.com/7iyVRMGY

Thanks to everyone for your help. Thanks, too, to omr for the IE fix
-- I hadn't tested for IE yet and it was a relief to see there was a
solution!

Nathan

[Jeff S (Google)]

Excellent tip! Thanks omr ;-)

Happy coding,

Jeff

[omr]

Bug report:

The two-page example code fails for queries containing extended
characters.

(Thanks to "TerryE" for reporting this in the Custom Search forum.)

Jeff, these changes should fix the problem:

Please specify UTF-8 encoding on the search and results pages:

<meta http-equiv="content-type"
content="text/html; charset=utf-8">

Also, in the getQuery function on the results page, please use
decodeURIComponent() instead of unescape().

return decodeURIComponent(
parts[i].split('=')[1].replace(/\+/g, ' '));

.

Here is the original report by TerryE:

http://www.google.com/support/forum/p/customsearch/thread?tid=31aa13cb3e256b3d

-- omr

[omr]

Oops.
Apologies to TarryE for misspelling the name
(TarryE not TerryE).

-- omr

[omr]

A note to Jeff:

It seems to me that the fix mentioned above is necessary in order to
execute searches containing extended characters (i.e., for languages
other than English). I wonder if you might want to update the example
on the blog to implement this fix?

-- omr

[Jeff S (Google)]

Hi omr,

Thanks for reporting the charset issue. Big oops on my part, not
testing international characters in all browsers. :-( I've fixed the
issues and went with accept-encoding on the form itself since that
should work even if the HTML is in a different character encoding.

http://ajax-apis.appspot.com/two-page-search

Happy coding,

Jeff

--
You received this message because you are subscribed to the Google Groups "Google AJAX APIs" group.
To post to this group, send email to google-ajax...@googlegroups.com.
To unsubscribe from this group, send email to google-ajax-searc...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-ajax-search-api?hl=en.

[zipnode]

Great article and exactly what I was looking for. For some reason my
getQuery script isn't working as expected - although I do see the para
being passed - progress!

Any help would be really great. I'm afraid I'm stuck.

http://www.snowbound.com/main/177/1285

[Jeremy Geerdes]

zipnode: Sorry I missed you in the IRC channel earlier today, and thanks for providing the link to your page. The problem that you're having has nothing to do with your getQuery() function. It has everything to do with the fact that you're not loading the jsapi loader until AFTER you try to load the Search API. This results in a JS error in googlesearch.js which brings the whole page to a screeching halt. To fix it, simply move the line in your code reading as below:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

to a position BEFORE this line:

<script type="text/javascript" language="Javascript" src="/js/googlesearch.js"></script>

If you have further problems, I will be around the IRC channel again in appr 2 hours. Or you can just respond to this thread.

Jeremy R. Geerdes

Effective website design & development

Des Moines, IA

For more information or a project quote:

http://jgeerdes.home.mchsi.com

jrge...@gmail.com

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

[omr]

On April 26, Jeff S. wrote:

> ... I've fixed the [character encoding] issues and

> went with accept-encoding on the form itself since that
> should work even if the HTML is in a different character encoding.

I've belatedly learned that Internet Explorer may not apply the
encoding specified in a form's accept-charset attribute.

Please test your example search page in IE8 (in either normal mode or
compatibility mode); enter any query containing extended characters,
and observe that the query value's encoding is *not* UTF-8 (unless the
browser was already set to use UTF-8 encoding for the search page).

.

See also this discussion:

http://stackoverflow.com/questions/153527/setting-the-character-encoding-in-form-submit-for-internet-explorer

-- omr

[Jeff S (Google)]

Hi omr,

Thanks for pointing this out and sorry for the delay. I looked at this
initially but didn't work out a test case, now I have.

Here's a page with Content-Type: text/html;charset=ISO-8859-1 and no
accept-charset on the form

http://jscudtest.appspot.com/form_encoding_test2

And here is one with the same content type but it uses accept-
charset="UTF-8" on the form.

I tested these two pages with the following query string:

ローマ字入力

I started with Chrome which gave the following URLs as expected:

(no accept-charset)
http://jscudtest.appspot.com/form_encoding_test2?q=%26%2312525;%26%2312540;%26%2312510;%26%2323383;%26%2320837;%26%2321147;

(with accept-charset)
http://jscudtest.appspot.com/form_encoding_test?q=%E3%83%AD%E3%83%BC%E3%83%9E%E5%AD%97%E5%85%A5%E5%8A%9B

Then I tried in IE6

(no accept-charset)
http://jscudtest.appspot.com/form_encoding_test2?q=%83%8D%81%5B%83%7D%8E%9A%93%FC%97%CD

(with accept-charset)
http://jscudtest.appspot.com/form_encoding_test?q=%E3%83%AD%E3%83%BC%E3%83%9E%E5%AD%97%E5%85%A5%E5%8A%9B

Note that the second URL, which is the page that has accept-charset is
fine. From the report on Stack Overflow it sounded like accept-charset
does work for IE6 if the charset is UTF-8, which is the only one we
will be using for this example.

Excellent question!

Happy coding,

Jeff

> http://stackoverflow.com/questions/153527/setting-the-character-encod...
>
> -- omr

[Jeff S (Google)]

Whoops I forgot the link to the page that has the accept charset of
UTF-8. You can find it here:

http://jscudtest.appspot.com/form_encoding_test

On Jul 1, 12:10 pm, "Jeff S (Google)" <j...@google.com> wrote:
> Hi omr,
>
> Thanks for pointing this out and sorry for the delay. I looked at this
> initially but didn't work out a test case, now I have.
>
> Here's a page with Content-Type: text/html;charset=ISO-8859-1 and no
> accept-charset on the form
>
> http://jscudtest.appspot.com/form_encoding_test2
>
> And here is one with the same content type but it uses accept-
> charset="UTF-8" on the form.
>
> I tested these two pages with the following query string:
>
> ローマ字入力
>
> I started with Chrome which gave the following URLs as expected:
>

> (no accept-charset)http://jscudtest.appspot.com/form_encoding_test2?q=%26%2312525;%26%23...
>
> (with accept-charset)http://jscudtest.appspot.com/form_encoding_test?q=%E3%83%AD%E3%83%BC%...

>
> Then I tried in IE6
>

> (no accept-charset)http://jscudtest.appspot.com/form_encoding_test2?q=%83%8D%81%5B%83%7D...
>
> (with accept-charset)http://jscudtest.appspot.com/form_encoding_test?q=%E3%83%AD%E3%83%BC%...

[omr]

Jeff,

Thanks for investigating this.

Please try this query:

voilà, ça marche pas

Try that in IE8, IE7, or IE6 on your example search page and accept-
charset test page:

http://ajax-apis.appspot.com/html/two_page_search.html

http://jscudtest.appspot.com/form_encoding_test

In this test IE encodes the characters à and ç in ISO-8859-1 (%E0,
%E7), not UTF-8.

This demonstrates that (as noted in my previous post) in such cases

"Internet Explorer may not apply the encoding specified in a form's
accept-charset attribute."

.

(Credit:
In my previous post, I should have credited "FabryShock", a CSE user
whose post in the Custom Search forum called attention to this issue.)

-- omr

[Jeff S (Google)]

Hi omr,

Aha, yes you are correct. Using characters which are in ISO-8859-1 was
the key.

IE6
http://jscudtest.appspot.com/form_encoding_test?q=voil%E0%2C+%E7a+marche+pas

Firefox
http://jscudtest.appspot.com/form_encoding_test?q=voil%C3%A0%2C+%C3%A7a+marche+pas

I also tried your earlier suggestion of including

<meta http-equiv="content-type" content="text/html; charset=utf-8">

with an intentionally mismatched Content-Type HTTP header (still using
ISO-8859-1) and it seems that IE6 is still using ISO-8859-1 for
encoding. At this point I think the safest course of action is to
abandon form encoding and rely on JavaScript to escape the query
string.

Thank you,

Jeff