JQuery Mobile - как стол + панель поиска

Question

Я пытаюсь закодировать таблицу с переключением столбцов на моей странице, но я хочу, чтобы она тоже имела строку поиска. Я пробовал разными способами, но я было две проблемы: во-первых, в строке поиска начался поиск текста кнопки Google в таблице, во-вторых, панель поиска искала элементы таблицы, но она набирала высоту, и она скрывала кнопку Google ... Что лучше способ реализовать панель поиска здесь?

код таблицы:

<table data-role="table" id="my-table" data-mode="columntoggle" 
      class="ui-body-d ui-shadow table-stripe ui-responsive" 
      data-column-btn-theme="b" data-column-btn-text="Colunas" 
      data-column-popup-theme="a"> 

<thead> 
    <tr class="ui-bar-d"> 
     <th data-priority="1">ID</th> 
     <th>Nome</th> 
     <th data-priority="2">Ano</th> 
     <th data-priority="3">Descrição</th> 
    </tr> 
</thead> 

<tbody> 
    <tr> 
     <th>1</th> 
     <td>Citizen Kane</td> 
     <td>1941</td> 
     <td>100%</td> 
    </tr> 
    <tr> 
     <th>2</th> 
     <td>Casablanca</td> 
     <td>1942</td> 
     <td>97%</td> 
    </tr> 
    <tr> 
     <th>3</th> 
     <td>The Godfather</td> 
     <td>1972</td> 
     <td>97%</td> 
    </tr> 
    <tr> 
     <th>4</th> 
     <td>Gone with the Wind</td> 
     <td>1939</td> 
     <td>96%</td> 
    </tr> 
    <tr> 
     <th>5</th> 
     <td>Lawrence of Arabia</td> 
     <td>1962</td> 
     <td>94%</td> 
    </tr> 
    <tr> 
     <th>6</th> 
     <td>Dr. Strangelove Or How I Learned to Stop Worrying and 
      Love the Bomb</td> 
     <td>1964</td> 
     <td>92%</td> 
    </tr> 
    <tr> 
     <th>7</th> 
     <td>The Graduate</td> 
     <td>1967</td> 
     <td>91%</td> 
    </tr> 
    <tr> 
     <th>8</th> 
     <td>The Wizard of Oz</td> 
     <td>1939</td> 
     <td>90%</td> 
    </tr> 
    <tr> 
     <th>9</th> 
     <td>Singin' in the Rain</td> 
     <td>1952</td> 
     <td>89%</td> 
    </tr> 
    <tr> 
     <th>10</th> 
     <td>Inception</td> 
     <td>2010</td> 
     <td>84%</td> 
    </tr> 

</tbody>   

Answer 1

Вот DEMO

<form> 
    <input id="filterTable-input" data-type="search" /> 
</form> 
<table data-role="table" data-mode="columntoggle" id="movie-table" data-filter="true" data-input="#filterTable-input" class="ui-responsive table-stroke" data-column-btn-theme="b" data-column-btn-text="Colunas" data-column-popup-theme="a"> 

Answer 2

вы пробовали это?

<div data-role="fieldcontain"> 
<label for="search-2">Search Input:</label> 
<input type="search" name="search-2" id="search-2" value="" /> 
</div>