Javascript ajax使用KnockoutJS在自动完成搜索框中触发两次

例如，我有一个客户姓名表

用户可以开始键入他们的姓名，并显示现有客户的列表。 然后，他们可以选择所需的名称，它将填充所有名称字段（first/middle/last）

必须通过键入FirstName字段来触发搜索/下拉列表

小提琴：

HTML

这很好，但问题是，当选择名称时，它将更新FirstName，然后FirstName.subscribe将关闭并再次执行ajax调用

我试着玩弄一些东西，但我被难倒了

在选择所需名称时，如何再次停止ajax触发

---

也许有一种方法可以告诉我们观测到的数据是如何更新的？e、 g仅通过按键更新触发ajax

您并不想订阅

FirstName

中的更改，而是捕获

keypress

事件，以便向用户显示姓名建议

试试这个：

<input type="text"
       placeholder="Start typing to search for a name"
       data-bind="value: FirstName, valueUpdate: 'keyup', event: { keyup: AutoComplete }" />

---

请参阅Fiddle:

您是否可以设置一个布尔可观测值来标记何时触发订阅：

self.fireSubscription = ko.observable(true);

self.FirstName.subscribe(function(newValue) {
    if(newValue.length > 2 && self.fireSubscription()) {
       //ajax call to fill Names starting with newValue
        self.ShowAjaxResults(true);
        console.log('ajax call: ' + newValue);
    }           
});

self.selectName = function(data) {
    self.fireSubscription(false);  // prevent the subscription firing
    self.FirstName(data.First);   
    self.MiddleName(data.Middle);
    self.LastName(data.Last);
    self.ShowAjaxResults(false);
    self.fireSubscription(true);   // enable the subscription 
}

---

更新的fiddle:

为什么要重新发明轮子，有很多自动完成的库，包括这个本地的组合。（我是作者）是的，这很有用，但我觉得有点复杂。我想先弄明白怎么自己做一个。有没有任何教程可以让我正确地制作一个像你这样的简单的击倒组合框？这并不复杂，请检查这里的实时演示getData是一个你需要实现的函数，它需要一个选项参数。option参数提供页面、页面大小、文本和回调。回调需要一个包含数据的对象，而total WAR数据是一个项目数组，total是总计数。当FirstName上没有限制时，此操作有效，但如果有限制，则会导致原始问题再次发生

<input type="text"
       placeholder="Start typing to search for a name"
       data-bind="value: FirstName, valueUpdate: 'keyup', event: { keyup: AutoComplete }" />

var model = function(){
    var self = this;

    self.AutoComplete = function(data, event){
        var newValue = event.target.value;
        if(newValue.length > 2) {
            //ajax call to fill Names starting with newValue
            self.ShowAjaxResults(true);
            console.log('ajax call: ' + newValue);
       }
        return true;
    }    

    self.Names = ko.observableArray([
            {First: "Joe", Middle: "Willikins", Last: "Bloggs"},
            {First: "Sam", Middle: "Silly", Last: "Smith"},
            {First: "Dog", Middle: "Zebra", Last: "Cat"}]);
    self.ShowAjaxResults = ko.observable(false);

    self.FirstName = ko.observable('').extend({ throttle: 500 });
    self.MiddleName = ko.observable('');
    self.LastName = ko.observable('');

    self.selectName = function(data) {
        self.FirstName(data.First);   
        self.MiddleName(data.Middle);
        self.LastName(data.Last);
        self.ShowAjaxResults(false);
    }
}

ko.applyBindings(model());

self.fireSubscription = ko.observable(true);

self.FirstName.subscribe(function(newValue) {
    if(newValue.length > 2 && self.fireSubscription()) {
       //ajax call to fill Names starting with newValue
        self.ShowAjaxResults(true);
        console.log('ajax call: ' + newValue);
    }           
});

self.selectName = function(data) {
    self.fireSubscription(false);  // prevent the subscription firing
    self.FirstName(data.First);   
    self.MiddleName(data.Middle);
    self.LastName(data.Last);
    self.ShowAjaxResults(false);
    self.fireSubscription(true);   // enable the subscription 
}