Question

我正在尝试在appcelerator中为列表视图（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**
         }

在appcelerator中为listview实现搜索栏

1 个答案: