Implémentation de la barre de recherche pour listview dans appcelerator

Question

J'essaie d'implémenter une barre de recherche pour la vue liste (lView) dans appcelerator. Mais le processus de recherche n'a pas lieu. aussi, après chaque alphabet que je tape dans la barre de recherche, il n'y a pas de résultats trouvés. Comment dois-je procéder?

Voici le code pour mes 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!"); 
}); 

Et ceci est le code pour 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

Vous devez définir les informations à rechercher (fait des recherches) en utilisant la propriété searchableText.

Essayez quelque chose comme ceci:

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