How to focus on input element when click on div class a href button

Question

 <ul id="top_menu">
  <li>
    <a href="#" id="arabutton" class="search-overlay-menu-btn" ><?php echo $pages->get('/')->text36;?></a>
    </li>
</ul>



        <!-- Search Menu -->
        <div class="search-overlay-menu">

                    <form  id="form-game_v2" name="form-game_v2" method="get" action="<?php $pages->get("template=home")->url ?>" >
                        <div class="typeahead__container">
                            <div class="typeahead__field">
                                <div class="typeahead__query">
                                    <input  class="js-typeahead-game_v2" id="ara" name="form" type="search" placeholder="Search"  autofocus>
                                </div>
                                <div class="typeahead__button">
                                    <button type="submit">
                                        <i class="typeahead__search-icon"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
        </div><!-- End Search Menu -->

i need a focus on input id="ara" when click on id="arabutton"

How can i do that? its a live search system. when click on button overlay input field appear for type .

live example: http://medilocation.com/en/treatments/pediatric-cardiology/ click on right up corner for search and you see that focus problem.

Answer 1

I finally did it

<script>
 document.getElementById("arabutton").addEventListener("click", function(){
     setTimeout(function() { jQuery('#ara').focus() }, 20);
});
</script>

arabutton is id of the button. when click on it overlay form comes. ara is id of inputfield on the overlay form