PassMark Logo
Home » Forum

Announcement

Collapse
No announcement yet.

How to add autocomplete to search boxes elsewhere on your site

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to add autocomplete to search boxes elsewhere on your site

    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.
    Code:
    <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:
    Code:
    <input name="zoom_query" type="text" class="ariel" size="45" />

    To this:
    Code:
    <input name="zoom_query" id="zoom_searchbox" type="text" class="zoom_searchbox" size="45" />
    Hope that helps.
    --Ray
    Wrensoft Web Software
    Sydney, Australia
    Zoom Search Engine

  • #2
    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.
    Mark Gallagher

    Comment


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

      Comment


      • #4
        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.
        Mark Gallagher

        Comment


        • #5
          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,

          Code:
          [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!
          --Ray
          Wrensoft Web Software
          Sydney, Australia
          Zoom Search Engine

          Comment


          • #6
            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.
            Mark Gallagher

            Comment


            • #7
              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.
              Mark Gallagher

              Comment


              • #8
                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'.
                Mark Gallagher

                Comment


                • #9
                  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.
                  --Ray
                  Wrensoft Web Software
                  Sydney, Australia
                  Zoom Search Engine

                  Comment


                  • #10
                    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.

                    Comment

                    Working...
                    X