在淘汰赛中选择后无法清除自动完成值

时间:2015-04-20 22:06:59

标签: knockout.js autocomplete

我在我的一个项目中使用了knockout-jqautocomplete插件。当我在自动完成中选择一个值时,检查我维护的其他数组是否已经具有该值。如果是,我什么都不做,否则我将所选值添加到数组。 单击/选择值后,将在自动填充文本框中填充所选值。但我不希望这种情况发生。

一旦我点击它,我只需要它调用所需的功能来检查它是否已经存在并清除自动完成值。但由于某种原因,我无法清除自动完成值。

请找到下面的jsfiddle链接。

http://jsfiddle.net/kumarr/qy0dkbdp/2/

非常感谢任何帮助

var ViewModel = function() {
var self = this;
this.templateValue = ko.observable();

this.remoteData = ko.observableArray([{
        id: 1,
        name: "one",
        description: "one description"
    },
    {
        id: 2,
        name: "two",
        description: "two description"
    },
    {
        id: 3,
        name: "three",
        description: "three description"
    }]);


this.ownerList = ko.observableArray([]);






this.addOwners = function (owner) {
    var exists = false;


        for (var o in self.ownerList()) {
            var temp = self.ownerList()[o];
            if (temp.id === owner.id) {
                exists = true;
            }
        }

        if (exists === false) {
            self.ownerList.push({
                "id": owner.id,
                "name": owner.name
            });
        }
        self.templateValue('');        


}

};


ko.applyBindings(new ViewModel());

我的HTML

<input data-bind="jqAuto: { source: remoteData, value: templateValue, inputProp: 'name', template: 'itemTmpl'  }" />

<div data-bind="foreach:ownerList">
  <div data-bind="text:name">
  </div>
</div>


<script id="itemTmpl" type="text/html">
  <a>
    <strong data-bind="text: id,click:$root.addOwners"></strong>
    <em data-bind="text: name,click:$root.addOwners"></em>
  </a>
</script>

1 个答案:

答案 0 :(得分:3)

不是在模板中添加click绑定,我认为在这种情况下可以更好地为您工作的方法是订阅templateValue可观察对象。每当更新时,您都可以运行逻辑,在必要时推送到您的observableArray,最后清除该值。

您设置了以下订阅:

this.templateValue.subscribe(this.addOwners);

以下是您的小提琴的略微修改版本:http://jsfiddle.net/rniemeyer/brpd63r8/