Implementierung der Suchleiste für Listview in Appcelerator

Question

Ich versuche, eine Suchleiste für Listenansicht (lView) in appcelerator zu implementieren. Der Suchvorgang findet jedoch nicht statt. Auch nach jedem einzelnen Alphabet tippe ich in die Suchleiste, es werden keine Ergebnisse gefunden. Wie gehe ich vor?

Dies ist der Code für meine 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!"); 
}); 

Und das ist der Code für 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

Sie müssen definieren, welche Informationen gesucht (durchsuchbar gemacht) werden mit die Eigenschaft searchableText.

versuchen, etwas wie folgt aus:

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