jquerymobile listview filter programatically

Question

我試圖完成這個任務。

我有兩列格

<div class="ui-grid-a"> 
    <div class="ui-block-a" style="width:35%"> 
     <div data-role="controlgroup" data-type="horizontal"> 
      <a href="#" data-role="button">A</a> 
      <a href="#" data-role="button">B</a> 
      <a href="#" data-role="button">C</a> 
      <a href="#" data-role="button">D</a> 
      <a href="#" data-role="button">E</a> 
      <a href="#" data-role="button">F</a> 
     </div>   
     <div data-role="controlgroup" data-type="horizontal"> 
      <a href="#" data-role="button">G</a> 
      <a href="#" data-role="button">H</a> 
      <a href="#" data-role="button">I</a> 
      <a href="#" data-role="button">J</a> 
      <a href="#" data-role="button">K</a> 
      <a href="#" data-role="button">L</a> 
     </div> 
     <div data-role="controlgroup" data-type="horizontal"> 
      <a href="#" data-role="button">M</a> 
      <a href="#" data-role="button">N</a> 
      <a href="#" data-role="button">Ñ</a> 
      <a href="#" data-role="button">O</a> 
      <a href="#" data-role="button">P</a> 
      <a href="#" data-role="button">Q</a> 
     </div> 
     <div data-role="controlgroup" data-type="horizontal"> 
      <a href="#" data-role="button">R</a> 
      <a href="#" data-role="button">S</a> 
      <a href="#" data-role="button">T</a> 
      <a href="#" data-role="button">U</a> 
      <a href="#" data-role="button">V</a> 
      <a href="#" data-role="button">W</a> 
     </div>   
     <div data-role="controlgroup" data-type="horizontal"> 
      <a href="#" data-role="button">X</a> 
      <a href="#" data-role="button">Y</a> 
      <a href="#" data-role="button">Z</a> 
      <a href="#" data-role="button" onclick="buscar();">BUSCAR</a> 
     </div>   
    </div>  
    <div class="ui-block-b" style="width:65%; top:0; position:relative;"> 
     <ul id ="milista" data-role="listview" data-filter="true" style="left:1em; width:95%; "> 
      <li><a href="index.html">Acura</a></li> 
      <li><a href="index.html">Audi</a></li> 
      <li><a href="index.html">BMW</a></li> 
      <li><a href="index.html">Cadillac</a></li> 
      <li><a href="index.html">Chrysler</a></li> 
      <li><a href="index.html">Dodge</a></li> 
      <li><a href="index.html">Ferrari</a></li> 
      <li><a href="index.html">Ford</a></li> 
      <li><a href="index.html">GMC</a></li> 
      <li><a href="index.html">Honda</a></li> 
      <li><a href="index.html">Hyundai</a></li> 
      <li><a href="index.html">Infiniti</a></li> 
      <li><a href="index.html">Jeep</a></li> 
      <li><a href="index.html">Kia</a></li> 
      <li><a href="index.html">Lexus</a></li> 
      <li><a href="index.html">Mini</a></li> 
      <li><a href="index.html">Nissan</a></li> 
      <li><a href="index.html">Porsche</a></li> 
      <li><a href="index.html">Subaru</a></li> 
      <li><a href="index.html">Toyota</a></li> 
      <li><a href="index.html">Volkswagon</a></li> 
      <li><a href="index.html">Volvo</a></li> 
     </ul>   
    </div> 
</div> 

像顯示了http://jsfiddle.net/jupagose/sugfP/，我想以編程方式過濾列表視圖，同時用戶類型的左側面板上。我不想強制用戶加載OS鍵盤。

它可以與jquery？

Answer 1

你去那裏：

$("[data-role=button]").click(function(e){ 
     var filter_el = $(".ui-input-text"); 
     var filter_val = filter_el.val(); 
     var filter_query = filter_val+$(this).text(); 
     filter_el.val(filter_query); 
     filter_el.trigger("change") 
    }); 

理想情況下，我將一個類添加到每個按鈕，並使用類按鈕點擊事件 例如$(".keyboard-btn").click ...過濾器也一樣。

這裏有一個小提琴： http://jsfiddle.net/sugfP/14/

UPDATE：

這是一個使用鍵盤類的一個示例： http://jsfiddle.net/sugfP/15/

Answer 2

如果你有多個輸入，使用

ui-input-text 

將se把他們全部。 使用這個而不是隻挑選過濾

var filter_el = $("[data-type='search']"); 

Answer 3

理查德的答案是完美的，但有一個爲JQM 1.4的更新。

jquerymobile refiltering。

只是觸發「更改」事件不會過濾列表。您將不得不寧願將「可篩選」小部件稱爲「刷新」方法

$(".listselector").filterable("refresh");