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

Question

我在我的一个项目中使用了 knockout-jqautocomplete 插件。每当我 select 自动完成中的一个值时，我都会检查我维护的另一个数组是否已经具有该值。如果是，我什么都不做，否则我将 selected 值添加到数组中。一旦输入 click/select 值，selected 值就会填充到自动完成文本框中。但我不希望这种情况发生。

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

请在下面找到 jsfiddle link。

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>

Answer 1

与其在模板中添加 click 绑定，我认为在这种情况下更适合您的方法是订阅 templateValue 可观察对象。每当更新时，您可以运行您的逻辑，推送到您的 observableArray，如有必要，最后清除该值。

您设置订阅如下：

this.templateValue.subscribe(this.addOwners);

这是您的 fiddle 的略微修改版本：http://jsfiddle.net/rniemeyer/brpd63r8/

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

Unable to clear autocomplete value once selected in knockout

autocomplete

knockout.js