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've typed your message subject and have taken the cursor out of the search box.
Some important points that this example demonstrates:
- How to use the <@liaAddScript> directive to add javascript to the page that will render below Lithium core JavaScript
- The proper way to namespace your JavaScript and guard against collisions with other JavaScript on the page
- How to make an AJAX call to the Lithium REST API
Requirements
Lithium version 9.18 or higher, Lithium Studio
How to add this to a Lithium community
There are two parts to adding an AJAX search to a page:
- Add a text key to be passed into the AJAX search component.
- Create the custom component.
To add a text key:
- Go to Studio > Text Editor.
- Click Search.
This empty search opens the list of text keys that you can edit. - In the Text Properties area, enter this custom text key.
custom.component.ajax_search_before_post.results_label = You may be interested in these similar messages:
- Click Save.
To add a custom component:
- In Studio, go to the Components tab.
- Click New Component to create a new component. Enter a name and click Save.
For example, ajax-search-before-post. - Add the following markup to the component and click Save.
<#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'>";
$.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>
Example
Go to the Code Sample 1 Example Page to see this in action.
