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

I have just converted type="search" to type="text" in my html code and added a submit button for the search...

Like that:-

<form>
      <input name="search" class="search" value="" placeholder="Search Item...." type="text" data-theme="e">
      <input type="submit" value="Search" data-mini="false" data-icon="search" data-iconpos="notext" data-theme="c"  />
</form>

And JS as usual a simple one for focus:-

$( ".opensearch" ).on( 'click', tapHandler );
function tapHandler( event ) {
     $('.search_field').toggle();
     $('.search').focus();
}

The code is now working for me... http://jsfiddle.net/aH4QM/14/show/

Answer 2

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'

Answer 3

when you accessing particular element through id you have to use "#" not "." and when u accessing the element through class name that time you can use ".". Please refer below code.

$(function() {

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

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

});

Thanks,

Siva