I want to create a custome search bar in confluence.

[Aditya Sastry]

Hi,

I want to create a custom search bar in confluence to show up next to the default search bar. 

I'm using the below link as a reference to start with.

https://confluence.atlassian.com/confkb/how-do-i-add-links-to-confluence-5-x-s-top-global-header-navigation-bar-358908020.html

I tried adding the below piece of code in the custom HTML section but unfortunately it doesn't reflect.

Any suggestions on how to go about this?

Thanks,
Aditya

<script>

AJS.toInit(function(){

    AJS.$('.aui-header-primary ul.aui-nav').append('<li style="display:block;"><input type="search" id="query" placeholder="Engineering Search..." aria-label="Search through site content"></li>')

</script>

[Aditya Sastry · Accepted solution]

Below is the code to work that works.

<script>
AJS.toInit(function(){
AJS.$('.aui-header-primary ul.aui-nav').append('<li style="display:block;"><input type="search" id="query" placeholder="Engineering Search..." aria-label="Search through site content"></li>');
AJS.$('#query').on('keypress', function(e) {
if (e.which === 13) { var queryText = $('#query').val(); 
var url = 'www.google.com=' + encodeURIComponent(queryText);
window.open(url, '_blank');
}
})
})
</script>

 Thanks,

Aditya