Open Search Result Link in New Tab.

Suchith

No such settings or components to change the search behavior.  You have to do it forcefully using the script. 

• Open this link
  https://lithosphere.lithium.com/t5/forums/searchpage/tab/message?advanced=false&allow_punctuation=false&q=lithium
• Run this line of code in the console
   jQuery('.page-link.lia-link-navigation.lia-custom-event').attr('target', '_blank');
• Click Any of the search item's subject so it should open in new window.

Give it a shot and check if it works in console. 

Hi Vikas,

I did it same way by adding target attribute to the anchor tag. I have shared the source code below.

<a class="lia-link-navigation lia-js-autocomplete-list-item-link lia-autocomplete-message-list-item-link lia-component-forums-auto-complete-message-list-item" 
tabindex="-1" id="link_0_37d75dea5d1a04_1dcf3" href="/t5/Account-Questions/How-to-Change-Account-Information/ta-p/265" 
target="_blank"><span class="lia-search-match-lithium">How</span> to Change Account Information</a>

But this code still opening in the same tab.

Hi Suchith,

That code is definitely correct. I have tested it in Internet Explorer, Mozilla Firefox, Chrome and Edge. If it isn't working for you I would suggest checking your browser settings or even check if you have another script on the page doing something else.

You can stop any other javascript running on it typically by using preventDefault() or if you are using jQuery click here to view this page.

Hopefully, this helps. If you are stuck do you mind posting what browser you are using?

Hi Jake, 

Thanks for the suggestion. Even I thought of preventing the default script and execute my own.

Still no luck. I am using the below script to prevent the default flow, but the event is not executing the script.

<script>
$(document).ready(function(){
    $("a.lia-link-navigation").click(function(event){
        event.preventDefault();
        console.log("prevented");
    });
});
</script>

Hi Suchith,

Thanks for posting the code. With Lithium, it is the best practice to put that code is a custom component if you haven't already and wrap it in the @liaAddScript directive.

Your code won't work on those links because they aren't created before the page has finished loading. You will need to add this "click" event to dynamically added "a.lia-link-navigation" as well. I don't have working code for this currently. However, it would be something like below.

<@liaAddScript>
;(function($){
$(document).on('click', 'a.lia-link-navigation', function(event){
  event.preventDefault();
  console.log("This worked!");
  window.open($(this).attr('href'), '_blank');
});
})(LITHIUM.jQuery); 
</@liaAddScript>

Quoted from the directive document:

"Lithium loads a set of jQuery libraries that we use in the Community with core Lithium features. Using the Lithium JQuery libraries improves performance because you avoid adding the jQuery twice (which will increase page load time)."

"If you attempt to use LITHIUM.jQuery outside of the liaAddScript directive, you run the risk of a "jQuery is undefined" or similar errors because your JavaScript is likely being added before jQuery has been loaded."

Hi Jake, 

I really appreciate your help. I still don't have any luck on this. I have tried  jQuery event delegation too, but its still not executing the script. I have posted my complete code below. 

<style>
#search .SearchForm {
    visibility: visible !important; 
}
.lia-button-searchForm-action{
    visibility: hidden;
}
.lia-search-input-message{
    padding: 0px 0px 0px 10px !important;
    border-radius: 5px !important;
}
.lia-component-common-widget-search-form .lia-search-input-wrapper .search-input{
    height: 40px !important;
}
.lia-component-common-widget-search-form{
padding: 0px !important;
}
</style>
<script>
	$(document).ready(function(){
           $('[name="messageSearchField"]').attr('placeholder','Enter a Subject');
	});
</script>
<div id="search">
	<table style="width:100%">
		<tbody>
  			<tr>
    			<td width="10%"><label class="required" id="ot_subject">Subject:</label></td>
    			<td><label id="subjectErrorMessage" style="color:red" hidden="true">Subject cannot be blank</label></td> 
 			</tr>
		</tbody>
	</table>
	<@component id="common.widget.search-form" hideGranularity="true" defaultToCommunity="false"/>
</div>

<@liaAddScript>
;(function($){
	$(document).on('click', 'a.lia-link-navigation.lia-js-autocomplete-list-item-link.lia-autocomplete-message-list-item-link.lia-component-forums-auto-complete-message-list-item', function(event){
  		event.preventDefault();
  		console.log("This worked!");
        window.open($(this).attr('href'), '_blank');
    });
})(LITHIUM.jQuery); 
</@liaAddScript>

I have created a custom search suggestion component using Standard Search form and  consuming the same in other pages.

Please let me know if i have done something wrong with this code.

Thanks 

Unfortunately, after doing some digging ... any jQuery or JS expert feel free to correct me ... there is no way to attach an event to the autosuggestion anchors.

The only way that you could do that is recreating the component yourself from scratch. Which I have done but ours is customised to how we need it.

The last thing while we are on this subject that I can think of that could work, would be trying to intercept the returned results and creating the autosuggest anchor tags themselves with the target="_blank" attribute. This would be a giant task and I don't know enough to tell you that it would work.