editors.combo

webix.editors.combo

webix.editors.combo helper.

Please look into the linked official documentation.

References

helpers
_event(), assert(), bind(), extend().

External references

Official documentation page.

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
webix.editors.combo = webix.extend({
    _create_suggest:function(config){
        if(this.config.popup){
            return this.config.popup.config.id;
        }
        else if (config){
            return create_suggest(config);
        } else
            return this._shared_suggest(config);
    },
    _shared_suggest:function(){
        var e = webix.editors.combo;
        return (e._suggest = e._suggest || this._create_suggest(true));
    },
    render:function(){
        var node = webix.html.create("div", {
            "class":"webix_dt_editor"
        }, "<input type='text' role='combobox' aria-label='"+getLabel(this.config)+"'>");

        //save suggest id for future reference
        var suggest = this.config.suggest = this._create_suggest(this.config.suggest);

        if (suggest){
            webix.$$(suggest).linkInput(node.firstChild, true);
            webix._event(node.firstChild, "click",webix.bind(this.showPopup, this));
        }
        return node;
    },
    getPopup:function(){
        return webix.$$(this.config.suggest);
    },
    showPopup:function(){
        var popup = this.getPopup();
        var list = popup.getList();
        var input = this.getInputNode();
        var value = this.getValue();

        popup.show(input);
        input.setAttribute("aria-expanded", "true");
        if(value ){
           webix.assert(list.exists(value), "Option with ID "+value+" doesn't exist");
            if(list.exists(value)){
                list.select(value);
                list.showItem(value);
            }
        }else{
            list.unselect();
            list.showItem(list.getFirstId());
        }
        popup._last_input_target = input;
    },
    afterRender:function(){
        this.showPopup();
    },
    setValue:function(value){
        this._initial_value = value;
        if (this.config.suggest){
            var sobj = webix.$$(this.config.suggest);
            var data =  this.config.collection || this.config.options;
            if (data)
                sobj.getList().data.importData(data);

            this._initial_text = this.getInputNode(this.node).value = sobj.getItemText(value);
        }
    },
    getValue:function(){
        var value = this.getInputNode().value;

        if (this.config.suggest){
            if (value == this._initial_text)
                return this._initial_value;
            return webix.$$(this.config.suggest).getSuggestion();
        } else
            return value;
    }
}, webix.editors.text);