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:

 

1. Go to Studio > Text Editor.
2. Click Search.
   This empty search opens the list of text keys that you can edit.
3. 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:

4. Click Save.

 

To add a custom component:

1. In Studio, go to the Components tab.
2. Click New Component to create a new component. Enter a name and click Save.
   For example, ajax-search-before-post.
3. 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&colon; ({
                                    "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.