.selectpicker('refresh') 不刷新 bootstrap select 在 algolia 地方自动完成

Question

我正在使用 algolia places 进行城市查找，然后为 selected 结果填充州和邮政编码。我面临的问题是，当状态发生变化时，bootstrap select 选择器的值会更新，但文本不会。

我尝试使用 .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');
})();

select从 algolia places 下拉结果列表中输入城市后，状态值会发生变化，但仍会显示初始文本，但如果单击状态 select框你会看到新的状态是 selected.

有什么想法吗？

Answer 1

研究文档@ SnapAppointments 发现刷新不是所需要的，它只刷新 select 选择器中的项目列表。

实际上，您必须以不同方式更新 select 选择器：“这与直接在 select 元素上调用 val() 不同。如果您调用 val()直接在元素上，bootstrap-select ui 不会刷新（因为更改事件仅在用户交互时触发）。您必须调用 ui 刷新方法你自己。"

所以代替：

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

您需要这样做：

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

这会更新 select选择器，就像最终用户单击它一样。

.selectpicker('refresh') 不刷新 bootstrap select 在 algolia 地方自动完成

.selectpicker('refresh') not refreshing bootstrap select on algolia places autocomplete

javascript

twitter-bootstrap

algolia

bootstrap-4