Knockout và jQuery tự động hoàn thành

Question

Ràng buộc giá trị Knockout không hoạt động với tính năng tự động điền jquery. Làm thế nào để nó hoạt động?

Tôi có một mẫu:

<input 
    type="text" 
    class="autocomplete" 
    data-bind="value: viewModelObservableValue" 
    name="MyValue" /> 

Sau mẫu vẽ tôi đang áp dụng jQuery autocomplete trên một đầu vào. Ràng buộc không hoạt động. Xem số jsfiddle của tôi.

Nó chỉ hoạt động nếu ko.applyBindings(viewModel) đi sau $(..).autocomplete(..);

Answer 1

Dường như jQuery autocomplete cướp sự kiện change. Đó là lý do tại sao nó không hoạt động.

Để khắc phục điều này, bạn sẽ phải đặt thuộc tính valueUpdate thành blur. Tất nhiên, điều này sẽ không kích hoạt sau khi chọn mục, bạn sẽ phải làm mờ trước.

$(function() { 
 
    var availableTags = [ 
 
     "ActionScript", 
 
     "AppleScript", 
 
     "Asp", 
 
     "BASIC", 
 
     "C", 
 
     "C++", 
 
     "Clojure", 
 
     "COBOL", 
 
     "ColdFusion", 
 
     "Scheme" 
 
    ]; 
 
    $(".autocomplete").autocomplete({ 
 
     source: availableTags 
 
    }); 
 
}); 
 

 
var viewModel = { 
 
    myValue: ko.observable() 
 
}; 
 

 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 

 
<input type="text" class="autocomplete" data-bind="value: myValue, valueUpdate:'blur' " /> 
 

 
<div data-bind="text: myValue"></div>