Автозаполнение Bootstrap Выпадающее меню

Question

У меня есть следующее выпадающее меню с текстовым полем автозаполнения. Можно ли как-нибудь увеличить ширину текстового поля автозаполнения и добавить автозаполнение прямо под ввод?

Это мой код:

<div id="menu" class="py-4 d-flex justify-content-center">
            <div class="row ">
                <div class="col-sm-auto ">
                    <div class="input-group">
                        <span style="color:black" class="input-group-addon form-control">
                        <select id="selection"onchange="getValues(this.value)">
                            <option>Choose Category</option>
                            <option>Notary</option>
                            <option>Deed Date</option>
                            <option>Person</option>
                            <option>Place</option>
                            <option>Manuscript Reference</option>
                            <option>Subject</option>
                        </select>
                        </span>
                        <input id="search" type="text" class="form-control" name="search" placeholder="Choose a category" disabled=true>
                        <button class="btn btn-default" type="button" id="searchButton" onclick="doSparql(this.value)"   style="border-width: 1px; border-color: lightgray;"><span class="fa fa-search"></span></button>
                    </div>
                </div>
            </div>
        </div>