Query completion in the search box

8/23/2012

Söksidan, EPiServer, SiteVision

Step by step

Note that it takes 24 hours before query completion is fully functioning

SiteSeeker search integration for EPiServer

In order to activate query completion in the search box on the search page, run through 1-4. To activate query completion in the quick search box, usually in the top right corner, you will also have to run 5-9.

  1. Make sure you use SiteSeeker 6 or higher. You will find the version number in SiteSeeker Admin.
  2. Install the lastest version of the SiteSeeker module for EPiServer. This guide requires version 3.3 or higher (it still works with the version 3.2.3694, but behavior has improved from version 3.3 and higher). If you do not have SiteSeeker 3.3 or higher, please contact the SiteSeeker Support.
  3. If you use SiteSeeker 6.02
    1. Log into SiteSeeker Admin and click on search pages.
    2. Tick the box Query completion in the search box, then click save settings
    3. Activate the settings.
    4. Wait until the system has run indexing and statistical data loading (is normally done at night).
  4. If you are using SiteSeeker 6.04 or later:
    1. Log into SiteSeeker Admin and click on search pages.
    2. Tick the box Query completion in the search box, then click save settings
    3. Activate the settings.
    4. Wait until the system has run indexing and statistical data loading (is normally done at night).
  5. Control the CSS-class names or the HTML-id:t for the quick seach box in EPiServer. If you are running EPiServer 5 and the standard control for the quick search box, the class name is QuickSearchField.
  6. Open the MasterPage-file for the website.
  7. Insert the following lines in page header:
    <%@ Register TagPrefix="SiteSeeker"TagName="QueryCompletionScript"Src="~/SiteSeeker/Extras/QueryCompletionScript.ascx" %>
    
  8. Insert the following user control within the page <head>-element:<SiteSeeker:QueryCompletionScript runat="server"SearchFieldSelector="selektor för sökfältet" SearchButtonSelector="selektor för sökknappen" />where selector for the search field and selector för search button is .classname or #htmlid respectively (i.e. jQuery-selectors). If you are using EPiServer 5 or 6 and the standard control for quick search field you use selectors .quickSearchField and .quickSearchButton respectively.
  9. You will now have fully functioning query completion in the quick search field as well as in the search field on the search page.

Troubleshooting

  • Test the query completion on the template search page. Note that auto complete is based on user data so if you have a client where few if any queries are executed, you will not receive any suggestions. Also make sure you perform indexing after the feature has been activated in SiteSeeker Admin.
  • If you receive a JavaSript error message, it can be because jQuery or jQuery.autocomplete is already included. In the user control QueryCompletionScript, set IncludeJQuery="false" and/or IncludeJQueryAutocomplete="false"
  • If you are using jQuery.noConflict() you have to adjust the files ~/SiteSeeker/Scripts/siteseeker.js and ~/SiteSeeker/Scripts/querycompletion.js, och substitute $ against jQuery.

Finally, you can adapt the behavior of the auto complete in ~/SiteSeeker/Scripts/querycompletion.js, and the design in ~/SiteSeeker/Styles/qc.css.