Renderer

Requirements

• an Indextank_[Ize]'d FORM.
• an Indextank_[AjaxSearch]'d INPUT to listen to.
• import jquery.indextank.renderer.js

How it works

Renderer binds to an element to display the results of an AjaxSearch. When Renderer hears an Indextank.AjaxSearch.success event, it zeroes the HTML of its bound element and loops over the search results, calling the format function on each element and appending the result to the bound element.

Usage

A basic example that uses the default format function to display your results:

var r = $("#results").indextank_Renderer();
$("#query").indextank_AjaxSearch({listeners: r});

The format function takes only one parameter - a single search result from an AjaxSearch. The following example adds the result's image to the display.

var customFormat = function(item){
    return $("<div></div>")
        .addClass("result")
        .append( $("<a></a>").attr("href", item.link || item.url ).text(item.title || item.name) )
        .append( $("<span></span>").addClass("description").html(item.snippet_text || item.text) )
        .append( $("<img></img>").attr("src", item.image) );
}
var customSetupContainer = function($el) {
    $el.html("Search results!");
}
var r = $("#results").indextank_Renderer({format: customFormat, setupContainer:customSetupContainer});
$("#query").indextank_AjaxSearch({listeners: r});

Options

• format: a function that takes a search result and should return HTML. The default format returns a "result" class div that links to the item with title or name and adds a "description" class span that contains the snippet text or text.
• setupContainer: a function that takes the bound $element and returns void. The default setupContainer sets the bound element's html to "".

Events

• Reacts to
  • Indextank.AjaxSearch.searching: sets the bound element's opacity to 0.5
  • Indextank.AjaxSearch.success: renders the results to the bound element. Sets the bound element's opacity to 1.
  • Indextank.AjaxSearch.failure: sets the bound element's opacity to 1.