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 sho...
Forum Discussion
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: ({
//"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>
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.
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.
