I have implemented a listview in my project (jQuery Mobile) and add a the textbox for the search.

But I want to show the listview first and only when the user clicks on the button to search open a textbox over the list.

Here is my code:

 <a data-role="button" href="#" class="search">Show Search box</a>

    <ul data-role="listview" data-filter="true" data-filter-placeholder="Pesquisa Contacto..." data-theme="d" data-divider-theme="d" style="padding:10px 10px 10px 10px;top:10px">
      <li>
        <a href="index.html">
          <h3>jQuery Team</h3>    
          <p><strong>Boston Conference Planning</strong></p>
          <p>In preparation for the uping conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
          <p class="ui-li-aside"><strong>9:18</strong>AM</p>
        </a>
      </li>
    </ul>

JAVASCRIPT:

$(document).on('pagebeforeshow', '#p33', function () {    
 $('form.ui-listview-filter').hide();
});
$(document).on('click', '.search', function () {
 $('form.ui-listview-filter').show();
});

I have implemented a listview in my project (jQuery Mobile) and add a the textbox for the search.

But I want to show the listview first and only when the user clicks on the button to search open a textbox over the list.

Here is my code:

 <a data-role="button" href="#" class="search">Show Search box</a>

    <ul data-role="listview" data-filter="true" data-filter-placeholder="Pesquisa Contacto..." data-theme="d" data-divider-theme="d" style="padding:10px 10px 10px 10px;top:10px">
      <li>
        <a href="index.html">
          <h3>jQuery Team</h3>    
          <p><strong>Boston Conference Planning</strong></p>
          <p>In preparation for the uping conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
          <p class="ui-li-aside"><strong>9:18</strong>AM</p>
        </a>
      </li>
    </ul>

JAVASCRIPT:

$(document).on('pagebeforeshow', '#p33', function () {    
 $('form.ui-listview-filter').hide();
});
$(document).on('click', '.search', function () {
 $('form.ui-listview-filter').show();
});

• javascript
• jquery
• html
• jquery-mobile

Share Improve this question Follow edited May 8, 2013 at 13:06 Omar 31.7k99 gold badges7272 silver badges116116 bronze badges asked May 8, 2013 at 11:08 user2232273user2232273 4,9741616 gold badges5151 silver badges7676 bronze badges 5

• You want to hide the search box, until a button is clicked? – Omar Commented May 8, 2013 at 12:43
• yes this is what i try to do... – user2232273 Commented May 8, 2013 at 12:47
• i have update the code .. with the help from Ishank... but says error loading page – user2232273 Commented May 8, 2013 at 12:49
• check this jsfiddle/Palestinian/Mt46d – Omar Commented May 8, 2013 at 12:49
• this is it... how it works with toogle? – user2232273 Commented May 8, 2013 at 12:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Demo

Hide Search box.

$(document).on('pagebeforeshow', '#pageID', function () {    
 $('form.ui-listview-filter').hide();
});

Show it on button click. The button has class search.

$(document).on('click', '.search', function () {
 $('form.ui-listview-filter').show();
});

One way is - Have the Mark up as-

<form id ="searchForm"class="ui-listview-filter ui-bar-c" role="search" style="display:none;"><div  class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c"><input placeholder="Filter items..." data-type="search" class="ui-input-text ui-body-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a></div></form>
<ul data-role="listview" data-filter="true" data-filter-placeholder="Pesquisa Contacto..." data-theme="d" data-divider-theme="d" 
           style="padding:10px 10px 10px 10px;top:10px">
<li><a href="index.html">           
                <h3>jQuery Team</h3>
                <p><strong>Boston Conference Planning</strong></p>
                <p>In preparation for the uping conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
                <p class="ui-li-aside"><strong>9:18</strong>AM</p>      
            </a></li>
            </ul>

Note that <form> has style="display:none;" as inline css.

Now, unhide/hide the Search form on the button click action- something like-

$(document).on("click","#BUTTON-SELECTOR",function(){
             $("searchForm").toggle();
});