Announcement

**David** · Feb-10-2016, 05:28 AM

Make sure you have also enabled Autocomplete in the Indexer (under "Configure"->"Autocomplete") and you have saved and reindexed with this feature enabled. It sounds like you have already done this step if it is working on the main search page.

For other pages you need to reference the "zoom_autocomplete.css" and "zoom_autocomplete.js" files. These files should have been created in your output directory (and uploaded by FTP automatically) if this was the case.

More details can be found in this post,
How to add autocomplete to search boxes elsewhere on your site

**Viking** · Feb-10-2016, 05:07 PM

Thanks for the quick reply. I have done what you suggest and followed the instructions for the link you provided, however, it is still not working. It only works when in the same directory as the "zoom_autocomplete.css" and "zoom_autocomplete.js" and the rest of the zoom files.

I'm thinking it has to do with the src="search/zoom_autocomplete.js" I tried that, I also tried the absolute src="http://www.mysite.com/search/zoom_autocomplete.js" Neither worked.

Any ideas?

Thanks

**Viking** · Feb-11-2016, 01:49 PM

I created a blank page with just the search box to try to get it to work. I added a class "test" which changed a font color, to the css, so I could confirm that the page was finding the css, which it is. However, the autocomplete does not work. Below is a copy of the complete code.

<!DOCTYPE html>
<%@ Page Language="VB" %>
<html dir="ltr">

<head runat="server">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<script type="text/javascript" src="../search/zoom_autocomplete.js"></script>
<script type="text/javascript">
if (window.addEventListener) window.addEventListener('load', function() { ZoomAutoComplete_OnLoad('zoom_query');}, false); else if (window.attachEvent) window.attachEvent('onload', function() { ZoomAutoComplete_OnLoad('zoom_query');}); else window['onload'] = function() { ZoomAutoComplete_OnLoad('zoom_query');}
</script>
<link rel="stylesheet" type="text/css" href="../search/zoom_autocomplete.css" />
</head>

<body>

<form action="../search/search.asp" method="GET">
<input name="zoom_query" id="zoom_query" type="text" class="ariel" size="25"/>
<input type="submit" value="Search">
</form>

<p class="test">Test</p>

</body>

</html>

**Richard** · Feb-11-2016, 08:23 PM

Did you specify "ZoomAutoComplete_URL" mentioned further in the forum post?

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

For example,

Code:

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

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

**Viking** · Feb-11-2016, 11:53 PM

I have tried that.

<script type="text/javascript" src="../search/zoom_autocomplete.js">var ZoomAutoComplete_URL = "../search/search.asp?zoom_ac=1";</script>

I assume that I need to change it to .asp as I am using the .asp version. Still does not work.

**Richard** · Feb-12-2016, 12:15 AM

Please try specifing the variable before linking the script.

Code:

<script language="javascript" type="text/javascript">
var ZoomAutoComplete_URL = "../search/search.asp?zoom_ac=1";
</script>
<script type="text/javascript" src="../search/zoom_autocomplete.js"></script>

You can also try opening Developer Tools ("Ctrl + Shift + I" in Chrome, F12 in Edge etc) and track down the JavaScript error messages.

**Viking** · Feb-12-2016, 02:32 PM

Putting the variable first seems to do the trick:

<script type="text/javascript">var ZoomAutoComplete_URL = "../search/search.asp?zoom_ac=1";</script>
<script type="text/javascript" src="../search/zoom_autocomplete.js"></script>
<script type="text/javascript">
if (window.addEventListener) window.addEventListener('load', function() { ZoomAutoComplete_OnLoad('zoom_query');}, false); else if (window.attachEvent) window.attachEvent('onload', function() { ZoomAutoComplete_OnLoad('zoom_query');}); else window['onload'] = function() { ZoomAutoComplete_OnLoad('zoom_query');}
</script>
<link rel="stylesheet" type="text/css" href="../search/zoom_autocomplete.css" />

**Viking** · Feb-12-2016, 03:02 PM

I spoke too quickly. It now shows the autocomplete, but when you select one, it does not put it in the search box.

**Viking** · Feb-12-2016, 03:15 PM

Chrome shows the error (when I click on one of the autocomplete answers) :

.
3
zoom_autocomplete.js:19 Uncaught TypeError: Cannot set property 'value' of null
ZoomAutoComplete_UseSuggestion @ zoom_autocomplete.js:19
onclick @ test.aspx:1

**Richard** · Feb-12-2016, 06:26 PM

Change the "id" attribute of the <input> tag in your <form> element to "zoom_searchbox" instead of "zoom_query".

Code:

<form action="../search/search.asp" method="GET">	
<input name="zoom_query" id="[COLOR="#FF0000"]zoom_searchbox[/COLOR]" type="text" class="ariel" size="25"/>
<input type="submit" value="Search">
</form>

**Viking** · Feb-16-2016, 03:53 PM

That worked, when I changed the id in the script up in the head too. Here is the complete corrected script for others (remember you will need to change the location of the files as needed).

Just before the </head> tag:

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

Down in the <body> where you would like your search box to be located:

<form action="../search/search.asp" method="GET">
<input name="zoom_query" id="zoom_searchbox" type="text" class="ariel" size="25" autocomplete="off"/>
<input type="submit" value="Search">
</form>

Announcement

Autocomplete

Autocomplete

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment