如何觸發jQueryMobile的listview搜索？

我正在使用兩種不同方式更新內容的列表視圖：搜索欄和選擇選項過濾器。如何觸發jQueryMobile的listview搜索？

到目前爲止，我設法根據這些條件之一來刷新列表視圖。問題是要結合這兩個選項。

下面是一個例子：

[搜索：沒有字符串] [選擇：沒有選項]

蘋果
香蕉
豆類
胡蘿蔔
土豆

讓我們假設用戶首先使用搜索框。 Listview內容根據搜索字符串更新。

[搜索：「B」] [選擇：沒有選項]

香蕉
豆類

然後，用戶使用選擇框。該列表視圖根據選定的選項進行重建，並使用一組較小的項目。

[搜索：「B」] [中進行選擇：蔬菜]

豆類
土豆

在這一點上，我想迫使研究，以篩選此使用搜索字符串更新的一組項目。我本來希望得到這樣的結果：

[搜索：「B」] [中進行選擇：蔬菜]

豆類

我尋找一個方法來強制jqueryMobile API搜索更新過程，但沒有成功。你知道我應該用來觸發搜索的功能嗎？

來源

2013-04-01 Yako

添加選擇的選項值 - 例如_vegetable_ - 到主陣列。然後在列表視圖搜索結果和選擇選項值之間進行比較。你怎麼看？ – Omar

您可以使用underscore.js構建您自己的過濾條件，然後將結果傳遞給列表視圖 –

看看這個。希望這個解決方案適合你。

http://jsfiddle.net/dxS8f/

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
<script> 

$(document).bind('pageinit', function() { 

    var listJSON = [ 
     { item : 'Apple',  category : 'Fruites'}, 
     { item : 'Banana',  category : 'Fruites'}, 
     { item : 'Beans',  category : 'Vegetables'}, 
     { item : 'Carrot',  category : 'Vegetables'}, 
     { item : 'Potatoes', category : 'Vegetables'}, 
     { item : 'Spinach',  category : 'Vegetables'}, 
     { item : 'Strawberry', category : 'Fruites'} 
    ]; 

    $.each(listJSON, function(i, field){ 
     $('#mylist').append('<li>'+field.item+'</li>').listview('refresh'); 
    }); 

    var yourFilterFunction = function(text, searchValue, item){ 
     var flag = false, 
      sCat = null; 
      categoryVal = $("#optCategory").val().toLowerCase(); 

     $.each(listJSON, function(i, field) { 
      if(field.item === text) { 
       sCat = field.category; 
      } 
     }); 

     flag = (text.toString().toLowerCase().indexOf(searchValue) > -1) && ((sCat.toLowerCase() === categoryVal || categoryVal === '')); 
     return !flag; 
    }; 

    $("#mylist").listview('option', 'filterCallback', yourFilterFunction); 

    $("#optCategory").bind('change', function() { 
     var inputTxt = $("input.ui-input-text").val(); 
     $(".ui-input-text").trigger("keyup"); 
     $.each(listJSON, function(i, field) { 
      yourFilterFunction(field.item, inputTxt, $("#mylist").children().eq(i)); 
     }); 
    }); 

}); 

</script> 
</head> 
<body> 
    <div data-role="page" id="HelloPage"> 
     <header data-role="header" class="header"> 
      <a href="#" data-rel="back">Back</a> 
      <h5>jQuery Mobile</h5> 
     </header> 
     <div data-role="content"> 
      <select id="optCategory" data-mini="true"> 
       <option value="" >Select One</option> 
       <option value="Fruites">Fruites</option> 
       <option value="Vegetables">Vegetables</option> 
      </select> 
      <br/> 
      <ul id="mylist" data-role="listview" data-inset="true" data-filter="true"> 
      </ul> 
     </div> 
     <footer data-role="footer" data-position="fixed"><h5>&copy; All rights reserved</h5></footer> 
    </div> 
</body> 
</html>

來源

2013-04-02 11:03:08

謝謝，這真的太棒了！抱歉我遲到的答案... – Yako

如何觸發jQueryMobile的listview搜索？

回答

相關問題