How to add autocomplete to search boxes elsewhere on your site

[Ray]

If you have enabled the autocomplete feature in Zoom, you will get an autocomplete dropdown on the search box that appears on your main search page -- this is the main search script, either "search.php" (if using PHP), or "search.asp", or "search.cgi", etc.

But if you have search boxes elsewhere on your website (on any page besides the search scripts mentioned above) that you have created in HTML yourself, Zoom can not automatically enhance these search boxes for you.

If you want the autocomplete feature on these manually made search boxes, you will have to add some HTML and scripting on those pages.

First, insert the following above the </head> tag:

[11/Apr/2017] EDIT: Alot of changes have occurred since this original post in 2014. Updated to reflect current version.

<script type="text/javascript" src="zoom_autocomplete.js"></script>
<script language="javascript" type="text/javascript">
if (window.addEventListener) window.addEventListener('load', function() { ZoomAutoComplete_OnLoad('[B]zoom_searchbox[/B]');}, false); else if (window.attachEvent) window.attachEvent('onload', function() { ZoomAutoComplete_OnLoad('[B]zoom_searchbox[/B]');}); else window['onload'] = function() { ZoomAutoComplete_OnLoad('[B]zoom_searchbox[/B]');}
</script>
<link rel="stylesheet" type="text/css" href="zoom_autocomplete.css" />

Note that the path to "zoom_autocomplete.js" and "zoom_autocomplete.css" needs to be altered to suit the location of the page that this code is copy and pasted into. The above assumes it is in the same directory.

Next, you will have to change your search box form HTML to have an id="zoom_query" attribute. So change from this:

<input name="zoom_query" type="text" class="ariel" size="45" />

To this:

<input name="zoom_query" id="zoom_searchbox" type="text" class="zoom_searchbox" size="45" />

Hope that helps.

[sizbut]

It seems you are psychic Ray - the very issue I've been working on today. Saves me a lot of reverse engineering the search results page. Many thanks.

[Stephen McDermott]

Agreed on the timeliness! One of the hits I'm working through right now and the answers at the top of the list!

[sizbut]

Ray,

Just a note that with the two paths adjusted I still could not get it working. The auto-complete drop-down appeared but showing only an HTTP 404 message.

Not fatal as it just prompted me to bite the bullet and rebuild the search at the same level as the file containing my custom form. Still probably quicker and more successful than if I had spent the whole day prodding around to work it all out myself so thank you again.

[Ray]

Glad it was of help...

Mark, you can define the variable ZoomAutoComplete_URL before linking to the "zoom_autocomplete.js" and define where your search script is.

For example,

[B]<script language="javascript" type="text/javascript">[/B]
[B]var ZoomAutoComplete_URL = "../search.php?zoom_ac=1";[/B]
[B]</script>[/B]
<script type="text/javascript" src="../zoom_autocomplete.js"></script>
[I]... rest of code in original post above here...[/I]

Of course, changing the path to "search.php" as needed.

Hope you all have a happy new years!

[sizbut]

Cheers as ever Ray.

I've just enabled search logging on my non-English searches in order to collect a set of auto-complete terms for those languages. So in a couple of weeks I will test your suggestion when I apply auto-complete to those languages.

[sizbut]

Ray,

Got the chance to revisit the site today.

Your suggested extra bit of script for 'var ZoomAutoComplete_URL = ...' has done the trick. So now all my zoom files are neatly back in a search sub-folder.

Many thanks for the excellent support.

[sizbut]

Ray,

I spoke a little too early. Whilst the extra variable did the trick with making the list of auto-complete suggestions appear correctly, I since found that then clicking on one of those words did not put that word into the search box.

The fix for that was to change all the 'zoom_query' references in the scripts and my search form to 'zoom_searchbox'.

[Ray]

You may be using the autocomplete script (or the search form HTML) from an older release,if you are having trouble with mismatched id= attributes.

The autocomplete script should only use "zoom_searchbox" (except in the reference to HTTP GET URL parameter "&zoom_query="). But the .getElementById() call should certainly be "zoom_searchbox".

Likewise, the search scripts should generate search forms that already have an id= attribute of "zoom_searchbox". But again, if you have custom search forms from a previous build, you may have been missing this attribute.

No changes to the scripts should be necessary, provided you are using the latest builds.

[powercircuits]

Thanks, I've been trying to figure out how to get auto-complete to work for a French site and I think this finally solved it.