AutoComboBox.js

qx.Class.define("AutoComboBox", {
  extend: qx.ui.form.ComboBox,
  members: {
    allItems: null,
    highlightMatch: function(fullText,toHighlight) {
      //TO implement
      return new qx.ui.form.ListItem(fullText);
    },
    keyHandler: function(e) {


      /*
       * upon pressing a key the ComboBox is emptied and
       * only the items which contain
       *
       */


      //var k = e.getKeyIdentifier();


      console.log(e.getKeyIdentifier());
            if(
                e.getKeyIdentifier() == "Enter" ||
                e.getKeyIdentifier() == "Escape"
            ) {
        this.close();
        return;
      };
      
      if(
                e.getKeyIdentifier() == "Left" ||
                e.getKeyIdentifier() == "Right" ||
                e.getKeyIdentifier() == "Home" ||
                e.getKeyIdentifier() == "End" ||
                e.getKeyIdentifier() == "Backspace"
      ){
           e.stopPropagation();
      };


      if( 
          e.getKeyIdentifier() == "Down" ||
          e.getKeyIdentifier() == "Up" ||
          e.getKeyIdentifier() == "Tab"
          ) {
              //user is selecting an item, no need to autocomplete now

              return;
          };

      this.removeAll();
      var val = this.getValue();
      var i;
      for(i=0;i<=this.allItems.length;i++) {
        var crtVal = this.allItems[i];
        if(!crtVal) {
          continue;
        };

        if(crtVal.match(new RegExp(val,""),"")){
          this.add(this.highlightMatch(crtVal,val));
        };
      };

      this.open();
    },
    addMember: function(text) {
      this.allItems.push(text);
      this.add(new qx.ui.form.ListItem(text));
    }
  },
  
  construct : function() {
    this.base(arguments);

    this.allItems = new Array();

    var txt = this.getChildControl("textfield");

    txt.addListener("keydown",this.keyHandler,this);
    txt.addListener("keypress",this.keyHandler,this);
    txt.addListener("keyup",this.keyHandler,this);
    

    //if clicked, the combobox will extend with all the items
    txt.addListener("mouseup",function(e){ 
      var context = this;
      setTimeout(
        function(){
          context.open();
        },300
      );
    },this);
    //txt.setKeepActive(true);
    //txt.setKeepFocus(true);

  }
});




var doc = this.getRoot();

//var autoc = new app.sms.AutoComboBox();
//var autoc = new app.sms.AutoComboBox();


var autoc = new app.sms.AutoComboBox("");
autoc.addMember("alabalaportocala");
autoc.addMember("ala qwdsagas");
autoc.addMember("basfsagasdg");
autoc.addMember("basgdasfsdgas");
autoc.addMember("cobalt 1234");
autoc.addMember("cobol 1234");



doc.add(autoc,{top:500,left:200});