Ajax search Before Post (Freemarker)
Description
This example shows how to create a Freemarker component that makes an AJAX call to the Lithium REST API using JQuery to render a list of messages that match a search word after you'...
Forum Discussion
Doug, thanks for this example. We implemented it, but ran into some problems. We fixed them, and I want to share the modified code.
<#assign result_list_size = 3 />
<#assign subject_input_class = "lia-form-subject-input" />
<#assign results_label = text.format("custom.component.ajax_search_before_post.results_label") />
<@liaAddScript>
;(function($) {
if (typeof LITHIUM.CUSTOMER == "undefined") {
LITHIUM.CUSTOMER = {};
}
if (typeof LITHIUM.CUSTOMER.EXAMPLE == "undefined") {
LITHIUM.CUSTOMER.EXAMPLE = {};
}
LITHIUM.CUSTOMER.EXAMPLE.AjaxSearch = function() {
$(document).ready(function() {
$(".${subject_input_class}").each(function(index, subject_input) {
var subject_input = $(subject_input);
subject_input.parent().append("<div class='ajax-message-subject-search-results'></div>");
subject_input.blur(function() {
var subj_input = $(subject_input);
var subjectValue = subj_input.val();
if (subjectValue.length > 0) {
$.ajax({
type: "GET",
url: "/${community.id}/restapi/vc/search/messages",
data: ({
"q":subjectValue,
"page_size":"${result_list_size}",
"restapi.response_style":"view",
"xslt":"json.xsl"
}),
success: function(result) {
$(subj_input).parent().find(".ajax-message-subject-search-results").each(function(index, results_div) {
if (result.response.messages == null || result.response.messages.message.length < 1) {
$(results_div).empty();
} else {
var msgMarkup = "<div><span>${results_label}</span></div>";
msgMarkup += "<table class='lia-list-wide'>";
if (typeof result.response.messages.message.length === 'undefined') {
msgMarkup += "<tr><td><a href='" + result.response.messages.message.view_href + "'>" + result.response.messages.message.subject.$ + "</a></td></tr>";
} else {
$.each(result.response.messages.message, function(index, msg) {
msgMarkup += "<tr><td><a href='" + msg.view_href + "'>" + msg.subject.$ + "</a></td></tr>";
});
}
msgMarkup += "</table>";
$(results_div).empty().append(msgMarkup);
}
});
}
});
}
});
});
});
};
})(LITHIUM.jQuery);
LITHIUM.CUSTOMER.EXAMPLE.AjaxSearch();
</@liaAddScript>
The typeof conditional check is needed there because the json XSLT returns a single element as the object itself instead of a one-element array. I think the XSLT should be updated so that all results are returned as arrays. This will help avoid special casing like this.
At LiNC this year, it was asked how to enhance this version to support an idle time lookup instead of an onBlur lookup. We have done this in our Tech Zone implementation. Here are the mods to the version I posted last. This version will initiate a search after 750 ms of idle time (as well as on blur).
<#assign result_list_size = 3 />
<#assign subject_input_class = "lia-form-subject-input" />
<#assign results_label = text.format("custom.component.ajax_search_before_post.results_label") />
<@liaAddScript>
;(function($) {
if (typeof LITHIUM.CUSTOMER == "undefined") {
LITHIUM.CUSTOMER = {};
}
if (typeof LITHIUM.CUSTOMER.EXAMPLE == "undefined") {
LITHIUM.CUSTOMER.EXAMPLE = {};
}
LITHIUM.CUSTOMER.EXAMPLE.AjaxSearch = function() {
$(document).ready(function() {
$(".${subject_input_class}").each(function(index, subject_input) {
var subject_input = $(subject_input);
var idleTime = 0;
var searchable = false;
var last_search = "";
subject_input.parent().append("<div class='ajax-message-subject-search-results'></div>");
var idleInterval = setInterval(function() {
timerIncrement(subject_input);
}, 250);
$(subject_input).keyup(function(e) {
idleTime = 0;
searchable = true;
});
function incrementTimer() {
idleTime++;
if (idleTime > 2 && searchable && last_search != subject_input.val()) {
$(subject_input).trigger("myIdleEvent", [ subject_input ]);
}
}
subject_input.bind('blur myIdleEvent', function(e, field, value) {
var subj_input = $(subject_input);
var subjectValue = subj_input.val();
searchable = false;
if (subjectValue.length > 0) {
$.ajax({
type: "GET",
url: "/${community.id}/restapi/vc/search/messages",
data: ({
"q":subjectValue,
"page_size":"${result_list_size}",
"restapi.response_style":"view",
"xslt":"json.xsl"
}),
success: function(result) {
$(subj_input).parent().find(".ajax-message-subject-search-results").each(function(index, results_div) {
if (result.response.messages == null || result.response.messages.message.length < 1) {
$(results_div).empty();
} else {
var msgMarkup = "<div><span>${results_label}</span></div>";
msgMarkup += "<table class='lia-list-wide'>";
if (typeof result.response.messages.message.length === 'undefined') {
msgMarkup += "<tr><td><a href='" + result.response.messages.message.view_href + "'>" + result.response.messages.message.subject.$ + "</a></td></tr>";
} else {
$.each(result.response.messages.message, function(index, msg) {
msgMarkup += "<tr><td><a href='" + msg.view_href + "'>" + msg.subject.$ + "</a></td></tr>";
});
}
msgMarkup += "</table>";
$(results_div).empty().append(msgMarkup);
}
});
}
});
}
});
});
});
};
})(LITHIUM.jQuery);
LITHIUM.CUSTOMER.EXAMPLE.AjaxSearch();
</@liaAddScript>
