On button click slide and focus on search input in jquery mobile

Question

I have made this UI with jquery mobile, here i am doing is on button click a search input slide down for search... and likewise it will focus on the input box...

This is the script i am using,

 $(function() {

    $( ".opensearch" ).on( 'tap', tapHandler );

    function tapHandler( event ) {
      $('.search_field').slideToggle();
      setTimeout(function(){
         $('.search').focus().tap();
        },0);
    }

});

I have tested it on Opera Mobile and iphone but the problem is that the focus doesnt happen means it should show the browser keyboard if applied focus() on it...

Is my code correct or something else? Is pure javascript is the solution for making this work?

Here is a non-working demo of it, http://jsfiddle.net/aH4QM/show/

Answer 1

Issue in your code is $('.search').focus().tap();

In html you mentioned

 <input name="search" id="search" value="" placeholder="Search Item...." type="search" data-theme="e" />

'Id' should start with '#' not '.'

Modified jsfiddle link is http://jsfiddle.net/aH4QM/4/

Note: To check in fiddle I changed the 'tap'event to'click'