.selectpicker ('refresh') не обновляет начальную загрузку, выберите в местах Алголии автозаполнение - PullRequest
Новая
       11

.selectpicker ('refresh') не обновляет начальную загрузку, выберите в местах Алголии автозаполнение

0 голосов
/ 31 декабря 2018

Я использую места в Алголии для поиска города, который затем заполняет штат и почтовый индекс для выбранного результата.Проблема, с которой я сталкиваюсь, заключается в том, что при изменении состояния значение для средства выбора начальной загрузки обновляется, а текст - нет.

Я пытался использовать .selectpicker ('refresh'), но не могу заставить его работать. 

<script>
(function() {
    var placesAutocomplete = places({
    appId: 'myID',
    apiKey: 'myKey',
    container: document.querySelector('#city-input'),
    templates: {
        value: function(suggestion) {
        return suggestion.name;
        }
    }
    }).configure({
    countries: ['us', 'ca'],
    type: 'city'
    });
    placesAutocomplete.on('change', function resultSelected(e) {
    document.querySelector('#state-select').value = e.suggestion.administrative || '';
    document.querySelector('#zipcode-input').value = e.suggestion.postcode || '';
    });
    $('#state-select').selectpicker('refresh');
})();

После выбора города из выпадающего списка мест Алголиирезультатов, значение состояния изменится, но оно все равно будет отображать исходный текст, но если вы нажмете на поле выбора состояния, вы увидите, что выбрано новое состояние.

results after selecting

Есть идеи?

1 Ответ

0 голосов
/ 02 января 2019

Исследованная документация @ SnapAppointments и обнаруженное обновление - это не то, что нужно, а только обновление списка элементов в средстве выбора.

На самом деле, вы должны обновить селектор выбора по-другому: " Это отличается от вызова val () напрямую для элемента select. Если вы вызываете val () для элемента напрямую, то bootstrap-selectПользовательский интерфейс не будет обновляться (так как событие изменения запускается только при взаимодействии с пользователем). Вам придется самостоятельно вызывать метод обновления пользовательского интерфейса."

Поэтому вместо: 

$('#state-select').value = e.suggestion.administrative || '';
$('#state-select').selectpicker('refresh');

Вам необходимо сделать следующее: 

$('#state-select').selectpicker('val', e.suggestion.administrative);

Это обновит селектор выбора, как если бы конечный пользователь нажал на него.

...