Forum Discussion

iftomkins's avatar
11 years ago

Add message type icons to search result items

This is code I'm working on which auto-suggests message search results as the user types. It works well, but the challenge is that it does not show the "message type" icon next to the results, as shown in this screenshot, such as for "solved" posts vs. normal forum posts.

 

Does anyone know how to modify the code below to include the message type icons? Thanks!

 

<#assign result_list_size = 6 />    
<#assign results_label = text.format('searchBeforePostField.success-text.title') />
<#-- Search only within current language -->
<#assign languageScope = coreNode.settings.name.get("profile.language")>
<@liaAddScript>
    ;(function($) {
            $(document).ready(function() {
            //console.log('got here 1');
                function runSearch() {
                        var subjectValue = $("#lia-subject").val();
                        if (subjectValue.length > 0) {
                        //console.log('got here 2');
                            $.ajax({
                                type: "GET",
                                url: "/${community.id}/restapi/vc/search/messages",
                                data&colon; ({
                                    //"q":subjectValue,
                                    "one_or_more":subjectValue, //less precise search than q
                                    //"filter": "labels%2Clocation",
                                    "location": "category%3A${languageScope}",
                                    "page_size":"${result_list_size}",
                                    "restapi.response_style":"view",
                                    "xslt":"json.xsl"
                                }),
                                success: function(result) {
                                $(".lia-form-subscriptions-fieldset-toggle").before("<div id='ajax_search_results'></div>")
                                //console.log('got here 3');
                                //console.log(subjectValue);
                                        if (result.response.messages == null || result.response.messages.message.length < 1) {
                                            //$("#ajax_search_results").empty();
                                            //console.log('got here 4');
                                        } else {
                                        //console.log('got here 5');
                                        var msgMarkup = "<fieldset><legend>${results_label}</legend>";
                                            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>";
                                            msgMarkup += "</fieldset>";
                                            $("#ajax_search_results").empty().append(msgMarkup);
                                        }
                                }
                             //end Ajax
                             });     
                        //end if statement
                        }             
                    //end runSearch function
                    }
                    // run on keystroke
                    $("#lia-subject").on('keyup', function () {
                        runSearch();
                    });
                    //run on page load
                    runSearch();
                }); //end document ready
    })(LITHIUM.jQuery);
 
</@liaAddScript>

4 Replies

  • Update: I've tried to add a nested Ajax call that queries the message type, but to no avail:

     

    <#assign result_list_size = 6 />    
    <#assign results_label = text.format('searchBeforePostField.success-text.title') />
    <#-- Search only within current language -->
    <#assign languageScope = coreNode.settings.name.get("profile.language")>
    <@liaAddScript>
        ;(function($) {
                $(document).ready(function() {
                console.log('got here 1');
                    function runSearch() {
                            var subjectValue = $("#lia-subject").val();
                            if (subjectValue.length > 0) {
                            console.log('got here 2');
                                $.ajax({
                                    type: "GET",
                                    url: "/${community.id}/restapi/vc/search/messages",
                                    data&colon; ({
                                        //"q":subjectValue,
                                        "one_or_more":subjectValue, //less precise search than q
                                        //"filter": "labels%2Clocation",
                                        "location": "category%3A${languageScope}",
                                        "page_size":"${result_list_size}",
                                        "restapi.response_style":"view",
                                        "xslt":"json.xsl"
                                    }),
                                    success: function(result) {
                                    $(".lia-form-subscriptions-fieldset-toggle").before("<div id='ajax_search_results'></div>")
                                    console.log('got here 3);
                                    console.log(subjectValue);
                                            if (result.response.messages == null || result.response.messages.message.length < 1) {
                                            console.log(result)
                                                //$("#ajax_search_results").empty();
                                                console.log('got here 4');
                                            } else {
                                            console.log('got here 5');
                                            var msgMarkup = "<fieldset><legend>${results_label}</legend>";
                                                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) {
                                                        console.log('id',msg.id.$);
                                                        //Check if message is a solution, and place solution/board icon in front
                                                        $.ajax({
                                                            type: "GET",
                                                            url: "/${community.id}/restapi/vc/messages/id/" + msg.id.$ + "/solutions/solution?restapi.response_format=json",
                                                            success: function(resultMessage) {
                                                                console.log('got here 6);
                                                                console.log(resultMessage);
                                                                //if accepted solution, add accepted solution to the msgMarkup, if not, just output the result item
                                                                if (resultMessage.response.$ == true) {
                                                                console.log('got here 7');
                                                                    msgMarkup += "<tr><td><a class='lia-link-navigation board-icon' id='link_1440ea2af6e_22049' href='#'><img title='Accepted Solution' alt='Accepted Solution' id='display_1440ea2af6e_22049' src='https://community.stage.fitbit.com/skins/images/E72149B924F4ACBF01B4C71DAA3C95FC/base/images/message_type_solved.png'></a><a href='" + msg.view_href + "'>" + msg.subject.$ + "</a></td></tr>";
                                                                } else {
                                                                console.log('got here 8');
                                                                       msgMarkup += "<tr><td><a class='lia-link-navigation board-icon' id='link_1440ea2af97_22049' href='#'><img title='Forum' alt='There are no unread messages in this message board' id='display_1440ea2af97_22049' src='https://community.stage.fitbit.com/skins/images/7035348463CEC56F38BE4187FB05EB82/base/images/icon_board.png'></a><a href='" + msg.view_href + "'>" + msg.subject.$ + "</a></td></tr>";
                                                                }
                                                            }
                                                         //end Ajax
                                                         });     
                                                     });
                                                    
                                                }
                                                console.log('got here 9')
                                                msgMarkup += "</table>";
                                                msgMarkup += "</fieldset>";
                                                $("#ajax_search_results").empty().append(msgMarkup);
                                            }
                                    }
                                 //end Ajax
                                 });     
                            //end if statement
                            }             
                        //end runSearch function
                        }
                        // run on keystroke
                        $("#lia-subject").on('keyup', function () {
                            runSearch();
                        });
                        //run on page load
                        runSearch();
                    }); //end document ready
        })(LITHIUM.jQuery);
     
    </@liaAddScript>

  • iftomkins's avatar
    iftomkins
    Maven
    9 years ago

    I don't think I ever figured this out. I think I went back to the out of the box search component so I could tap into the default behavior with icons, then changed some parameters in the xml layout, and finally hacked at it with CSS.

  • TariqHussain's avatar
    TariqHussain
    Boss
    9 years ago

    iftomkins - Better way is to create an Endpoint for that and make AJAX call with search text to the endpoint which you have created. Make search restapi call in your endpoint and create HTML for the result.

    Give
    kudos if you find my posts helpful or mark solution if it answers your query.