Knockout textInput binding not update value

Question

Я использую google maps places api для автоматического заполнения входного значения поиска.

<input data-bind="textInput: searchInput" id="location" type="text"> 

Так что, когда я начинаю набирать в поле ввода, например, я типа Ro, а затем из автозаполнения предложение я выбираю Rome и нажмите на кнопку отправить, значение searchInput() все еще находится в Ro вместо Rome. Как я могу получить searchInput() для обновления после выбора предложения автозаполнения?

Answer 1

Карты Google запускают событие place_changed при выборе из автозаполнения. Вы можете поймать это событие и сгореть input события на элементе, который Knockout может читать:

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    ko.utils.triggerEvent(input, "input"); 
}); 

https://jsfiddle.net/dxdyqbxr/

Answer 2

Это было некоторое время, так как я использовал нокаут, но внутри вашей ViewModel где вы определили ваш searchInput вам будут создать вычисляемую функцию. Когда ваше значение изменится в текстовом поле, оно отключит функцию автозаполнения и, когда будет выбрано значение, будет обновлен поиск, который будет обновлять ваше текстовое поле. Не уверен, что здесь может существовать бесконечный цикл, поэтому обязательно проверяйте и настраивайте.

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
    self.searchInput('autocompleteValue'); 
 
}); 
 

 
self.UseAutoComplete = ko.computedFunction((
 
    google.maps.places.Autocomplete(self.searchInput()); 
 
));