1

我在页面顶部有一个搜索栏，用户可以在其中输入任何单词。我想显示包含用户输入的单词的歌曲的名称。如何使用 enyo.js 进行设计？

4

2 回答 2

3

特别为你做了一点评论:) http://jsfiddle.net/joopmicroop/NEYQC/

enyo.kind({
    name: 'App',
    kind: enyo.Control,
    components: [
        {kind: 'FittableRows', components:[
           {name: 'footer', kind: 'onyx.Toolbar', components: [
               {kind: "onyx.InputDecorator", components: [
                       {kind: "onyx.Input", name:"inputfield", placeholder: "Search number"},
                ]},
                {kind: "onyx.Button", content: "Search", ontap: "search"}, 
           ]},
            {kind: "List", fit: true, name:'list', classes:'list', count: 20, fixedHeight: true, onSetupItem: "setupItem", components: [
               {name: "item", classes:'listitem', ontap: "itemTap", components: [
                   {tag:'span', name: "name", content:"song name"},
                   {tag:'span', name: "index", content:"", style:'float:right;'}
                ]},
            ]},

        ]}
    ],
    searchstring:'',
    search: function(inSender, inEvent) {
        console.log('search tapped');
        console.log('inputfield value: ', this.$.inputfield.getValue());
        console.log('list: ', this.$.item);
        console.log('searchstring: ',this.searchstring);
        this.searchstring = this.$.inputfield.getValue();
        this.$.list.refresh();

    },
    setupItem: function(inSender, inEvent) {
        // just to have something to fill in
        var data = ['alibaba', 'alibobo', 'alibibi'];
        this.$.index.setContent(inEvent.index);
        this.$.name.setContent(data[inEvent.index %3]);
        // if searchstring isn't emty get to work
        if(this.searchstring != ''){
            var regex = new RegExp(this.searchstring); // = /searchstrin/g

            if(this.$.name.getContent().search(regex) != -1){ // -1 = not found
                this.$.list.select(inEvent.index, true); // set state selected true      
            }
            // if selected = true change add css class
            this.$.item.addRemoveClass("listitemselected", inSender.isSelected(inEvent.index)); 
        }

    },
    itemTap: function(inSender, inEvent) {
        alert("You tapped on row: " + inEvent.index);
    },

});​
于 2012-09-22T14:00:00.127 回答
0

我在这里发布了一个示例，作为我的 enyojs 教程的一部分，但它在这里使用了一个名为 taffyDB 的第三方库

于 2013-08-07T14:29:28.763 回答