Auto-Complete, suggestions for Magnolia CMS with JQuery/SolR Part 5/5 (Adding the jquery script to show the autocomplete)

Ok, remember our theme module from last post, we will as well put a javascript there that will deal with the autocomplete stuff.

var jq = jQuery.noConflict();
jq(document).ready(function() {</code>

var suggestions = [];
jq( "#searchbar" ).autocomplete({
source:function( request, response ) {
//${contextPath} is a freemarker variable that will give us the servlet context
//type is a custom parameter used for a specific project, you can adapt it to your project here.
jq.get("${contextPath}/searchservlet/",{search:request.term.toLowerCase(),queryType:"SUGGEST",fields:"collation",type:"*"},
function(data) {
//data is the data returned by the servlet in teh correct format so that the jquery autocomplete plugin can parse it.
response(data);
},"json"
);
}
});
jQuery.noConflict();

JQuery comes by default in magnolia pages, you just should create your own jQuery handler to avoid conflicts, this is why the var jq = jQuery.noConflict() is there.

And now the freemarker template bit regarding the searchbox.

<div id="search-box">
<form action="${stkfn.searchPageLink(content)!}" >
<div>
<input required="required" id="searchbar" name="queryStr" type="text" value="${ctx.queryStr!?html}" autocomplete="off"/>
<input type="submit" value="" />
</div>
</form>
</div>

Voila !

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: