Tag Editor - Using Knockout Combos

Made with std Inputbox over Select combo

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;
}

input:focus, select:focus {
    outline: none !important;
}

JavaScript

ko.components.register('combo-widget', {
  viewModel: function(params) {
    var self = this;
    self.value = ko.observable(params.value);
    self.selvalue = ko.observable(params.value);
    self.options = ko.observableArray(["Bert", "Bertington", "Bess", "Bessington"]);

    self.selchg = function(opt) {
      this.value(self.selvalue());
    }.bind(self);

  },
  template: '<div class="ipwrapper" >\
    		<input class="ncselectinput" type="text" data-bind="value: value" />\
        <select class="ncselect" data-bind="value:selvalue,options: options, event:{change:selchg}"></select>\
    	</div>'
});

ko.components.register('keyword-widget', {
  viewModel: function(params) {
    var self = this;
    self.keywords = ko.observableArray([{
      "one": "type",
      "two": "video"
    }]);

    self.addKeyword = function() {
      self.keywords.push({
        "one": "",
        "two": ""
      });
    }.bind(this);

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


  },
  template: '<div data-bind="foreach: keywords">\
		<div>\
    	<combo-widget params="value:one"></combo-widget>\
      <combo-widget params="value:two"></combo-widget>\
      <button data-bind="click: $parent.delKeyword">Del</button>\
    </div>\
   	</div>\
    <button data-bind="click: addKeyword">Add</button>'

});


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