How to call 'search form?

I'm also having the same issue.  I would love to place the search into our custom header but I'm not sure which javascript and CSS I need to ensure it retains it's default styling / functionality.

Yes! I experienced this same issue. I got even more confused because I was trying to expand the search box using Javascript. It got very confusing because the one input, as you've seen, is actually 3 inputs for 3 different scopes: users, boards, and message (which community, forums, and ideas, ex. message?include_ideas).

I solved it like this: (at least this is what i remember, so take it as approximate information)

1. Simplified the issue by defaulting the search to the community scope. I added this modified version of the Search Form widget to the XML (found this somewhere in the Lithium docs):

           <@component id="common.widget.search-form" hideGranularity="true" defaultToCommunity="true"/>

2. I added HTML around the search form, I think at the suggestion of a Lithium employee, like this:

                <div class="search-persistent">
                      <div id="lia-searchform" class="SearchForm lia-search-form-wrapper lia-mode-default lia-component-common-widget-search-form">
                           <@component id="common.widget.search-form" hideGranularity="true" defaultToCommunity="true"/>
                      </div>
                </div>

3. I added a lot of CSS to make it look okay, since moving the search widget up there broke all of the native Lithium CSS.

You can see it in action here: http://community.fitbit.com. That search bar was a project of many tears for me. :*) Good luck!

Ah, this was the info I needed, thank you so much.

I really don't need the users to be able to sort their search via the homepage, so the single bar is much easier to manage / manipulate.

Cheers!

<@component id="common.widget.search-form" />

Is this a component provided by lithium ?

Kindly let me know.

Thank you in advance

Navya