Help on putting an opened search box instead of a clickable icon?

Product Support
2

so far i paste the search-bar code in the header:

<div class="panel-body">
    <div class="panel-body-contents clearfix">
    <input placeholder="جستجوی موضوعات، نوشته ها، کاربران یا دسته‌ بندی ها" value="" id="search-term" type="text">
        
        <div class="search-context">      
        <a title="گزینه ها" class="widget-link show-help">گزینه ها </a>
            <div class="clearfix">
            </div>
        </div>
    </div>
</div>

and now there exist a search panel in the header of the site, which needs some css of course.

but more importantly it’'s non-functional.

does anyone have any idea how to make it functional? what javascript code should i put there to call the search function of discourse?