Javascript 在具有依赖/链接自动完成列表的引导中选择2。不起作用

我正在尝试使用Bootstrap4和Django创建依赖/链接下拉列表（具有自动完成功能）

我正试着用这个

如果表单是下拉列表，则一切正常

<select id="id_country" name="country" class="form-control" >
    <option value="" selected="selected">---------</option>
    <option value="1">Colombia</option>
    <option value="2">Rusia</option>
</select>
<select id="id_city" name="city" class="form-control">
    <option value="" selected="selected">---------</option>
    <option value="1" class="1">Bogotá</option>
    <option value="2" class="2">Moscú</option>
    <option value="3" class="2">San Petersburgo</option>
    <option value="4" class="1">Valledupar</option>
</select>

---------
哥伦比亚
俄罗斯
---------
波哥大
莫斯库
圣彼得堡
瓦勒杜帕尔

但是当我尝试将自动完成设置为第一个字段时，第二个字段停止工作（停止响应）

我的代码（更改后）如下所示：

<select id="id_country" name="country" class="form-control" data-toggle="select" title="Country" data-live-search="true" data-live-search-placeholder="Country">
    <option value="" selected="selected">---------</option>
    <option value="1">Colombia</option>
    <option value="2">Rusia</option>
</select>
<select id="id_city" name="city" class="form-control">
    <option value="" selected="selected">---------</option>
    <option value="1" class="1">Bogotá</option>
    <option value="2" class="2">Moscú</option>
    <option value="3" class="2">San Petersburgo</option>
    <option value="4" class="1">Valledupar</option>
</select>

---------
哥伦比亚
俄罗斯
---------
波哥大
莫斯库
圣彼得堡
瓦勒杜帕尔

向“选择”字段添加其他参数后解决方案停止工作的原因。是否可以在模板中添加一些简单的JavaScript代码，以便再次运行该模板，以便第二个下拉字段再次正确响应