文本框CSS在应用了awesomplete后停止工作

Question

我有一个文本框，其CSS会在我应用apply awesomplete（用于文本框的自动完成功能）后立即停止工作。

我试图给例如静态宽度。 100％或300px。但是此文本框不会随着屏幕尺寸的改变而自动改变大小

<div class="form-group" style="margin-top: 90px" id="mai"> 
<div class="form-group row" style="margin-top: 20px;">
                    <label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Location of travel/Address:</label>
                    <div class="col-sm-9">
                        <input  class="form-control" id="Loc_trv_add" type="text" placeholder="Location of travel/Address" />
                    </div>
                </div>
</div>

Awesomplete代码是：

<script>
        var str = document.getElementById("Loc_trv_add");
        document.addEventListener('DOMContentLoaded', function () {
            // Awesomplete AJAX demo from https://leaverou.github.io/awesomplete#ajax-example
            var ajax = new XMLHttpRequest();
            ajax.open("GET", "json_text.txt", true);
            ajax.onload = function () {
                var list = JSON.parse(JSON.parse(ajax.responseText)).map(function (i) { return i.sl_no });
                //var list = JSON.parse(ajax.responseText).map(function (i) { return i.sl_no; });
                new Awesomplete(document.getElementById("Loc_trv_add"), { list: list });
                document.getElementById("Loc_trv_add").style.width = "400%";
            };
            ajax.send();
        });
    </script>

错误：宽度不再根据屏幕大小而改变。

预期：根据屏幕尺寸更改宽度。