在編輯器中實現列表視圖的搜索欄

Question

我試圖在編輯器中實現列表視圖（lView）的搜索欄。但搜索過程不會發生。此外，在每一個字母輸入搜索欄後，都會顯示未找到結果。我如何繼續？

這是我的DashboardController.js

var args = $.args; 

var sections = []; 
//JSON to populate the listview 
var videoInfo = [{ 
    pic : "/Images/playButton.png", 
    info : "This in the the title for the first video.", 
    date : "03/07/2017", 
    url : "/videos/Appcelerator_media.mp4" 
}, { 
    pic : "/Images/playButton.png", 
    info : "This in the the title for the second video.", 
    date : "03/07/2017", 
    url : "/videos/Appcelerator_media.mp4" 
}, { 
    pic : "/Images/playButton.png", 
    info : "This in the the title for the third video.", 
    date : "03/07/2017", 
    url : "/videos/Appcelerator_media.mp4" 
}]; 

/*populateListView() adds items to the List View by pushing the items in the array sections[] and sets this array to the List View */ 
function populateListView() { 
    Ti.API.trace("[DashboardController.js >> populateListView() >>]"); 
    if (!_.isEmpty(videoInfo)) { 
     for (var i = 0; i < videoInfo.length; i++) { 
      var item = { 
       template : "videoTemplate", 
       iconId : { 
        image : videoInfo[i].pic 
       }, 
       titleId : { 
        text : videoInfo[i].info 
       }, 
       dateId : { 
        text : videoInfo[i].date 
       }, 
       urlId : { 
        text : videoInfo[i].url 
       }, 
       properties : { 
        backgroundColor : "transparent" 
       } 
      }; 
      sections.push(item); 
     } 
     $.listSection.setItems(sections); 
    } 
} 
populateListView(); 


$.lView.addEventListener('itemclick',function(e){ 
    /*This function creates a controller view of the controller VideoPlayerController for the Controller DashboardController to pass arguments */ 
    Ti.API.trace("[DashboardController.js >> Function to open VideoPlayerController >>]"); 
    var dataItem = videoInfo[e.itemIndex];//$.listSection.getItemAt(e.itemIndex) ; 
    Ti.API.trace("Data Item is : ",dataItem); 
    var videoController = Alloy.createController('VideoPlayerController',{ 
    "url":dataItem.url, 
    "title":dataItem.info, 
    "date":dataItem.date 
    }).getView(); 
Alloy.Globals.parent.add(videoController); 
    //videoController.open(); 
}); 

/*This function blurs the searchBar when the search is cancelled*/ 
$.search.addEventListener('cancel', function(e){ 
    Ti.API.trace("[DashboardController.js >> Function to Cancel the Search >>]"); 
    Ti.API.trace("Cancelling Search..."); 
    $.search.blur(); 
}); 
$.search.addEventListener('change',function(e){ 
    $.lView.searchText = e.value; 
}); 
$.lView.addEventListener('noresults', function(e) { 
    alert("No results found!"); 
}); 

的代碼，這是使用DashboardController.xml

代碼

<Alloy> 
    <View id="win2" class="container"> 
     <View id = "v1" class ="view1" layout ="horizontal" > 
      <Button class="btnBack" ></Button> 
      <Label class = "label1">LIST VIEW EXAMPLE</Label> 
     </View> 
     <View class="view2"> 
      <SearchBar class="searchBar" id="search"></SearchBar> 
     </View> 
     <ListView id = "lView" class = "list1" > 
      <Templates> 
        <ItemTemplate name="videoTemplate"> 
         <View class = "viewTemplate" layout = "horizontal" > 
          <ImageView bindId="iconId" id="pic" /> 
          <View class = "viewTitle" layout = "vertical" > 
           <Label bindId="titleId" id="info" /> 
           <View class="viewDtUrl" layout="horizontal" > 
            <Label bindId="dateId" id="date" /> 
            <Label bindId="urlId" id ="url" /> 
           </View> 
          </View> 
         </View> 
        </ItemTemplate> 
      </Templates> 
      <ListSection id = "listSection"> 
      </ListSection> 
     </ListView> 
    </View> 
</Alloy> 

Answer 1

您需要定義應搜索什麼樣的信息（可搜索） searchableText屬性。

嘗試這樣：

properties : { 
     backgroundColor : "transparent", 
     **searchableText: videoInfo[i].info** 
     }