Hi everyone I am new to visualJS so do forgive me if this is a basic request,,,,

[baba4]

Hi everyone
I am new to visualJS so do forgive me if this is a basic request, I have a vb6 application that I am now looking to convert to visualJS. I'll get right to the point.
In my vb6 app i use combo dropdown list to display a list of patients, the list size can be anything from 1500 to 6700, now in vb6 the list is alphabet and the user only has to type a few letters and the list is filtered to the name,

basically how can I implement this filtered combo dropdown list box

Many Thanks in advanced.

ps what a great project.

[linb]

Update the latest code from SVN, and try the code:


Class('App', 'linb.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
           
            append(
                (new linb.UI.List)
                .setHost(host,"ctl_list1")
                .setItems([{"id":"a", "caption":"item a", "image":"img/demo.gif"}, {"id":"b", "caption":"item b", "image":"img/demo.gif"}, {"id":"c", "caption":"item c", "image":"img/demo.gif"}, {"id":"d", "caption":"item d", "image":"img/demo.gif", "disabled":true}])
                .setLeft(-160)
                .setTop(290)
                .setValue("a")
            );
           
            append(
                (new linb.UI.ComboInput)
                .setHost(host,"ctl_comboinput2")
                .setLeft(250)
                .setTop(140)
                .setWidth(260)
                .setDynCheck(true)
                .setLabelCaption("ctl_comboinput2")
                .onChange("_ctl_comboinput2_onchange")
                .beforePopShow("_ctl_comboinput2_beforepopshow")
                .afterPopShow("_ctl_comboinput2_afterpopshow")
            );
           
            return children;
            // ]]code created by jsLinb UI Builder
        },

        _ctl_comboinput2_afterpopshow : function (profile, popCtl) {
            this.ctl_comboinput2.activate();
        },
        _ctl_comboinput2_onchange : function (profile, oldValue, newValue) {
            var ctrl=profile.boxing(),
                list=ctrl.getPopWnd();
            if(list){
                if(newValue){
                    _.arr.each(list.getItems(),function(o){
                        var n=list.getSubNodeByItemId('ITEM',o.id);
                        n.css('display',_.str.startWith(o.id, newValue)?'':'none');
                    });
                }else{
                    list.getSubNode('ITEM',true).css('display','');
                }
            }
        },
        _ctl_comboinput2_beforepopshow : function (profile, popCtl) {
            var ctrl=profile.boxing(),
                list=popCtl.boxing(),
                newValue=ctrl.getUIValue();
            if(list){
                if(newValue){
                    _.arr.each(list.getItems(),function(o){
                        var n=list.getSubNodeByItemId('ITEM',o.id);
                        n.css('display',_.str.startWith(o.id, newValue)?'':'none');
                    });
                }else{
                    list.getSubNode('ITEM',true).css('display','');
                }
            }
        },
        events : {"onReady":"_com_onready"},
        _com_onready : function (com, threadid) {
            this.ctl_comboinput2.setItems([{"id":"a1", "caption":"a1"}, {"id":"a2", "caption":"a2"}, {"id":"a3", "caption":"a3"}, {"id":"a4", "caption":"a4"}, {"id":"a5", "caption":"a5"}, {"id":"a6", "caption":"a6"}, {"id":"a7", "caption":"a7"}, {"id":"a8", "caption":"a8"}, {"id":"a9", "caption":"a9"}, {"id":"a10", "caption":"a10"}, {"id":"a11", "caption":"a11"}, {"id":"a12", "caption":"a12"}, {"id":"a13", "caption":"a13"}, {"id":"a14", "caption":"a14"}, {"id":"a15", "caption":"a15"}, {"id":"a16", "caption":"a16"}, {"id":"a17", "caption":"a17"}, {"id":"a18", "caption":"a18"}, {"id":"a19", "caption":"a19"}, {"id":"a20", "caption":"a20"}, {"id":"b1", "caption":"b1"}, {"id":"b2", "caption":"b2"}, {"id":"b3", "caption":"b3"}, {"id":"b4", "caption":"b4"}, {"id":"b5", "caption":"b5"}, {"id":"b6", "caption":"b6"}, {"id":"b7", "caption":"b7"}, {"id":"b8", "caption":"b8"}]);
        }
    }
});