indextank-jquery is a bunch of little building blocks to make your search UX better.
If you just want to see it working on your index, just:
- Download a tarball -> https://github.com/flaptor/indextank-jquery/tarball/master
- Uncompress it
- cd to the extracted directory
- Find test.html, and add there your API URL, and INDEX NAME
- Point your browser to test.html, and type a query
I assume you have a search template, and it has:
- a FORM on it, with an id.
- an INPUT element with type=text, and an id. This element is a child of the FORM element above.
- a DIV element with an id, that we can use to display results.
If you met these requirements, follow these steps:
- Copy the <head> element of test.html on the <head> element of your site's template. If you didn't go through the Quick usage section above, place your indextank credentials on it.
- Edit the script, so that:
- the indextank_Ize()'d element matches the FORM id.
- the indextank_Autocomplete()'d element matches the INPUT id.
- the indextank_Renderer()'d element matches the DIV id.
- Write a query on your search box
Sure you can! You'll need to write a format function that takes a result as argument and returns the rendered HTML.
Example
var userFormat = function(item) {
var r = $("<div></div>").addClass("result").addClass("user")
.append( $("<img></img>").attr("src", item.avatar ) )
.append( $("<a></a>").attr("href", item.url).html(item.snippet_name || item.name) )
.append( $("<span></span>").addClass("location").text(item.hometown || "far far away") );
// some items need a slightly different rendering
if (item.is_staff == "true") {
r.addClass("staff");
}
return r;
};
And then tell your renderer to use it
$("#results").indextank_Renderer({format: userFormat});
indextank-jquery relies on
You can hotlink them from github, download them and serve them yourself, or use google ajax apis. Just make sure you import them in order, before importing indextank-jquery files.