Tag Editor - Using Knockout Combos

Made with std Inputbox over Select combo, only one component NOT 2

by Ben Clayton

HTML

Keywords:
<br>
<keyword-widget params="value:123"></keyword-widget>

CSS

combo-widget .ncselect {
  position: relative;
  width: 230px;
  height: 26px;
}

combo-widget .ncselectinput {
  position: absolute;
  z-index: 2;
  width: 200px;
  height: 22px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border: 1px solid #C0C0C0;
  border-right: 0;
  background-color: rgb(248, 248, 248);
}

combo-widget .ipwrapper {
  display: inline-block;
  position: relative;
}

JavaScript

ko.components.register('keyword-widget', {
  viewModel: function(params) {
    var self = this;
    self.keywords = ko.observableArray([["type","Bert"]]);
    self.options = ko.observableArray(["Bert", "Bertington", "Bess", "Bessington"]);
    self.addKeyword = function() {
      self.keywords.push(
        ["",""]
      );
    }.bind(this);
    self.selchg = function(kw) {
    console.log("chg",kw);
    };

    self.delKeyword = function(kw) {
      this.keywords.remove(kw);
    }.bind(this);


  },
  template: '<div data-bind="foreach: keywords">\
		<div>\
<div class="ipwrapper" >\
    		<input class="ncselectinput" type="text" data-bind="value: $data[0]" />\
        <select class="ncselect" data-bind="value:$data[0],options: $parent.options, event:{change:$parent.selchg}"></select>\
    	</div>\
<div class="ipwrapper" >\
    		<input class="ncselectinput" type="text" data-bind="value: $data[1]" />\
        <select class="ncselect" data-bind="value:$data[1],options: $parent.options, event:{change:$parent.selchg}"></select>\
    	</div>\
      <button data-bind="click: $parent.delKeyword">Del</button>\
    </div>\
   	</div>\
    <button data-bind="click: addKeyword">Add</button>'

});


ko.applyBindings();
//ko.applyBindings();