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.
function(data) {
//data is the data returned by the servlet in teh correct format so that the jquery autocomplete plugin can parse it.

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)!}" >
<input required="required" id="searchbar" name="queryStr" type="text" value="${ctx.queryStr!?html}" autocomplete="off"/>
<input type="submit" value="" />

Voila !


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: