.selectpicker('refresh') 不刷新 algolia 上的引导选择自动完成

Posted 2023-05-08

【中文标题】.selectpicker(\'refresh\') 不刷新 algolia 上的引导选择自动完成

【英文标题】：.selectpicker('refresh') not refreshing bootstrap select on algolia places autocomplete.selectpicker('refresh') 不刷新 algolia 上的引导选择自动完成

【发布时间】：2019-05-27 17:23:35

【问题描述】：

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

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

从 algolia Places 结果下拉列表中选择城市后，状态值会发生变化，但仍会显示初始文本，但如果单击状态选择框，您将看到新状态被选中。

有什么想法吗？

【参考方案1】：

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

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

所以而不是：

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

你需要这样做：

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

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