JQuery ListView多個項目

Question

我需要在頁面上使用3個jQuery移動列表視圖（使用listviewbeforefilter）由一個主文本輸入控制。

我的想法是，我創建三個正常的列表視圖：

<div> 
    <input type="text" id="MasterBar"> 
</div> 

<div data-theme="a" class="ui-block-a"> 
    <ul id="ListResults1" data-filter-theme="b" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Enter Terms..." data-mini="true" data-split-icon="info" data-theme="a" data-divider-theme="a" data-split-theme="a"></ul> 
</div> 

<div data-theme="a" class="ui-block-b"> 
    <ul id="ListResults2" data-filter-theme="b" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Enter Terms..." data-mini="true" data-split-icon="info" data-theme="a" data-divider-theme="a" data-split-theme="a"></ul> 
</div> 

<div data-theme="a" class="ui-block-c"> 
    <ul id="ListResults3" data-filter-theme="b" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Enter Terms..." data-mini="true" data-split-icon="info" data-theme="a" data-divider-theme="a" data-split-theme="a"></ul> 
</div> 

當用戶將文本輸入到主輸入它應該觸發三個列表視圖。子列表視圖需要位於與$('#MasterBar')輸入不同的列中。

$(document).ready(function() 
{ 
    //hide all of the input fields 
    $('.ui-input-search').hide(); 

    ('#MasterBar').keyup(function() 
         { 
          $("input[data-type='search']").val(this.value); 
         }); 

}); 

目前看起來並不奏效。我無法弄清楚如何觸發事件。

$("input[data-type='search']").trigger("listviewbeforefilter"); 

這是可行的還是有更好的方法來做到這一點？

Answer 1

設置一個類像你的列表視圖，試驗和嘗試此代碼：

$.expr[':'].containsIgnoreCase = function (e, i, m) { 
    return jQuery(e).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
}; 

$("#filter") 
    .keyup(function() { 
     if ($(this).val().length == 0) 
      $("ul.test").find("li").show(); 
     else { 
      //hide all the rows 
      $("ul.test").find("li").hide(); 
      //split the current value of searchInput 
      var data = $(this).val().split(" "); 
      //create a jquery object of the rows 
      var jo = $("ul.test").find("li"); 
      //Recursively filter the jquery object to get results. 
      $.each(data, function (i, v) { 
       jo = jo.filter("*:containsIgnoreCase('" + v + "')"); 
      }); 
      //show the rows that match. 
      jo.show(); 
      //Removes the placeholder text 
     } 
    });