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>

  • 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

        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.