How to design search bar?

Question

I have a search bar on the top of a page where user can type any word. I want to display the names of the songs which contain the word typed by user. How to design this using enyo.js?

Answer 1

Made a little fiddle with comments especialy for you :) 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);
    },

});​

Answer 2

i got a sample posted here as part of my enyojs tutorial, but it uses a third party library called taffyDB here