Sitesearch install guide

This step by step guide talks you, once you have received your search engine's unique identifier, through the steps to install Openindex site search on your website.

Loading jQuery and the search engine library

The search engine uses jQuery for handling events and building the interface, please make sure you use jQuery 1.7.1 or higher if you want to use the autocomplete widget. The engine code does not use the common JavaScript $.() function shortcut so it is compatible with JavaScript libraries such as Prototype, MooTools and others.

  <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

If you have another JavaScript library on the same page that uses the $.() function shortcut, you must tell jQuery to revert the function shortcut back to its original library.

  <script type="text/javascript">jQuery.noConflict();</script>

Following jQuery you will need the Openindex search service JavaScript library. The library needs to be initialized with your search service identifier, the ssi parameter. If you have not yet received your search service identifier contact support or acquire your search service identifier by contacting sales. Add the following section to your HTML and make sure you use the correct search service identifier:

  <script type="text/javascript"
    src="http://www.openindex.io/js/openindex.<your ssi here>.js"></script>

If you incorrectly load our JavaScript library you may encounter the openindex is not defined JavaScript error.

Now that everything is loaded and preconfigured with default settings you can start building the search interface by adding the various widgets to your HTML. A complete list of customizations can be found in our search service API documentation.

Adding the search box and button

Put the text field at the desired location on your search results page. Browser based autocomplete and spell checking are disabled by default, it is recommended not to enable them. Your users can type their search query in this box and press the enter button to execute the search. The value attribute is automatically set if the search originates from an external page.

  <input type="text" id="oi-query" class="oi-query" name="oi-query" autocomplete="off"
    spellcheck="false" maxlength="127" dir="ltr"/>

You can then add a search button next to the text field. If your users press the search button the search query is executed, just as when they press the enter button in the text field.

  <input type="button" id="oi-submit" class="oi-submit" name="oi-submit" value="Search"/>

You can also add the lucky button. Pressing the lucky button will automatically redirect the user to the first result of their search query. This button is optional.

  <input type="button" id="oi-lucky" class="oi-lucky" name="oi-lucky" value="Lucky"/>

The search results header

This header, which is part of the used pager control, will contain information on an executed search request such as how many results are found or a message if the search yielded no results at all. The exact contents of the header depend on which type of pager you use and possible customizations. Check the API documentation on the pager for all customizations.

  <span id="oi-header"></span>

Enabling the automatic spell checker

This span contains the controls for the automatic spell checker and is usually empty. However, if your user's search query is considered incorrectly spelled the span will either contain a message with a spelling suggestion hyperlink, or inform the user that a new corrected search query automatically has been executed. A new correct query is only executed if a spell check suggestion is available and the original query yields zero results. Check the API documentation on the spell checker for all customizations.

  <span id="oi-spellcheck"></span>

The spell checker output comes with information in the search results header. It's recommended to put a line break or fixed height spacing between the search results header and the spell checker.

Adding the search results

Now you can add the search results list. It is automatically populated by snippets and hyperlinks of documents that match the user's search query.

  <div id="oi-results"></div>

The search engine writes unordered list items to the oi-results div. Each list item contains a header with the result title and a span containing the result snippet. Here's an example of a complete search result page containing a single result and an optional image, the image and it's parent anchor are only added if an image is available. An address is shown in the cite tags and is configured as a hyperlink.

  <div id="oi-results">
   <ul>
    <li class="oi-result-1">
     <h2>
      <img src="http://www.openindex.io/img/icons/text-html.png" alt="text/html">
      <a class="oi-outlink" href="http://example.org/" id="oi-outlink-title-1"
        rel="nofollow">IANA — Example domains</a>
     </h2>
     <cite>
      <a class="oi-outlink" href="http://example.org/" id="oi-outlink-addr-1"
        rel="nofollow">example.org</a>
     </cite>
     <span class="oi-snippet">
      <a id="oi-outlink-image-1" rel="nofollow" href="http://example.org/">
       <img class="oi-result-image" width="100" height="80" alt=""
         src="http://www.openindex.io/img/cache/..."/>
      </a>
      <time class="oi-time">3 days ago - </time>
      As described in RFC 2606, we maintain a number of domains such as EXAMPLE.COM and
      <em>EXAMPLE.ORG</em> for documentation purposes. These domains may ...
     </span>
    </li>
   </ul>
  </div>

Adding the pager

The pager control is used to navigate between pages of the search results. The contents of the pager div depend on the type of pager control you use. It is recommended to place the pager control below your search results.

  <div id="oi-pager"></div>

Facets and constraints

You can optionally add faceting to your search engine. By default faceting for MIME-types and host names is available but can be expanded to allow the user to filter the search to specific website sections. To enable the faceting engine for file types, languages and host names just add the following divs to your search results page:

  <div class="oi-facet-constraints" id="oi-facet-type"></div>
  <div class="oi-facet-constraints" id="oi-facet-lang"></div>
  <div class="oi-facet-constraints" id="oi-facet-host"></div>

The div's id attribute tells the search engine the it's a faceting control on the type field. After each search the div is automatically populated with the available file types. It works the same for host names where the div's id attribute becomes oi-facet-host. This is useful for search services that expand multiple host names. Here is an example of how the facet control is displayed, the user has selected the web page constraint which can be emphasized using CSS:

  <div class="oi-facet-constraints" id="oi-facet-type">
   <span class="io-facet-header">Documents</span>
   <ul>
    <li>
     <a href="#" class="oi-facet-constraint-selected">Web page (162)</a>
    </li>
    <li>
     <a href="#" class="oi-facet-constraint">PDF document (46)</a>
    </li>
    <li>
     <a href="#" class="oi-facet-constraint">Office document (17)</a>
    </li>
   </ul>
  </div>

If you have configured URL based categories for your search service you can add the category facet as well. Just like the other faceting widgets this widget is automatically populated based on the website sections you have configured.

  <div class="oi-facet-constraints" id="oi-facet-cat"></div>

And if your website's pages contain dates such as publication dates or creation dates for articles you can add the date facetting widget as well. It allows to filter for search results in a range of time.

  <div class="oi-facet-constraints" id="oi-facet-date"></div>

The faceting engine does not return zero counts for its configured constraints. It also doesn't display the constrains and facet header if there is only one constraint available. This means that for websites that only have HTML web pages the type facet is not available and the host facet is not available if the search subscription service only encompasses a single host.

The autosuggest widget

Openindex also provides an autosuggest widget which is enabled by default. This widget displays search suggestions for characters typed in the input box. Suggestions are based on real user input and therefore no suggestions are available for new subscriptions, it takes a short period before there are enough suggestions available. Below is an example HTML snippet you can style using CSS, the user has typed `auto` in the input box:

  <ul class="oi-suggestions">
    <li class="oi-suggestion">
      <strong>auto</strong>
    </li>
    <li class="oi-suggestion">
      <strong>auto</strong>complete
    </li>
    <li class="oi-suggestion">
      <strong>auto</strong>suggest
    </li>
    <li class="oi-suggestion">
      <strong>auto</strong>matic
    </li>
  </ul>
     

The autosuggest is the only widget that has a default CSS style enabled but is automatically disabled if the front-end developer has provided their own CSS rules. Please see the documentation on automatic styling and how to style the widget using dummy data in development mode.

Enabling the related queries widget

Openindex also provides a widget listing queries that are considered to be related to the query the user has entered. Add the following div to enable this widget.

  <div id="oi-related-queries"></div>

Below is an example HTML snippet you can style using CSS:

  <div id="oi-related-queries">
    <h3 class="oi-related-queries-header">Related queries</h3>
    <ul>
      <li class="oi-related-query" rel="nofollow">
        <a href="#" rel="nofollow">solar system planets</a>
      </li>
      <li class="oi-related-query" rel="nofollow">
        <a href="#" rel="nofollow">solar system pictures</a>
      </li>
      <li class="oi-related-query" rel="nofollow">
        <a href="#" rel="nofollow">solar system facts</a>
      </li>
      <li class="oi-related-query" rel="nofollow">
        <a href="#" rel="nofollow">wonders of the solar system</a>
      </li>
      <li class="oi-related-query" rel="nofollow">
        <a href="#" rel="nofollow">solar system to scale</a>
      </li>
    </ul>
  </div>
     

See related pages

The Openindex sitesearch service can provide a set of web pages that are similar to the one the user currently sees. Just like the popular and trending widgets, this widget is almost identical to the regular oi-result search results widget and uses the same CSS classes. You can also use almost all openindex.result.* configuration options are available via openindex.related.*. The CSS classes are the same as oi-result-.* but are oi-related-results-.*.

  <div id="oi-related-results"></div>

See the trending pages of your site

The Openindex sitesearch service knows which web pages are currently trending. The trending web pages widget is almost identical to the regular oi-result search results widget and uses the same CSS classes. You can also use almost all openindex.result.* configuration options are available via openindex.trending.*. The CSS classes are the same as oi-result-.* but are oi-trending-results-.*. This widget cannot function if openindex.recordViews is set to false.

  <div id="oi-trending-results"></div>

See the popular pages of your site

Besides knowing which pages are trending, the Openindex sitesearch service also knows which web pages are overall popular. Just like the trending widget, the popoular web pages widget is almost identical to the regular oi-result search results widget and uses the same CSS classes. You can also use almost all openindex.result.* configuration options are available via openindex.popular.*. The CSS classes are the same as oi-result-.* but are oi-popular-results-.*. This widget cannot function if openindex.recordViews is set to false.

  <div id="oi-popular-results"></div>

See recommended pages

The Openindex sitesearch service can provide a set of web pages that are personally recommended to the user. Just like the popular and trending widgets, this widget is almost identical to the regular oi-result search results widget and uses the same CSS classes. You can also use almost all openindex.result.* configuration options are available via openindex.recommended.*. The CSS classes are the same as oi-result-.* but are oi-recommended-results-.*.

  <div id="oi-recommended-results"></div>

Get suggestions for 404 page not found

Openindex sitesearch service can help your users find their way if they accidentally ended up on a 404 not found page. Add the following element to enable this widget. Check the documentation for the possible parameters, or see it in action by clicking on this 404 hyperlink to this page.

  <p id="oi-page-notfound"></p>

Using an external search box

If you want the Openindex search box on other pages as well all, such as in the header of your website, you just have to load jQuery, our site search engine with your SSI code and put the search box and optionally the button somewhere. You can tell the search engine where it should submit to by setting the submitTo configuration.

Contact us
Please feel free to contact us now! Call 0(031) 50 85 36 620, send an e-mail or go to our contact page.
CONTACT US