Флажок Bootstrap - как вернуть введенное значение?

Question

Я создаю приложение на работе, и одним из требований является поле выбора, которое также позволяет вводить собственную строку. Bootstrap Combobox , казалось, делал именно это.Я использую Bootstrap 4.

Теперь этот код в моем View (упрощен по причинам NDA):

    @using (Ajax.BeginForm(
    actionName: "Testcombo",
    controllerName: "Backoffice",
    ajaxOptions: new AjaxOptions
    {
        HttpMethod = "POST"
    }
    ))
    {

    <select class="combobox" name="TestDrop">
        <option></option>
        <option value="PA">Pennsylvania</option>
        <option value="CT">Connecticut</option>
        <option value="NY">New York</option>
        <option value="MD">Maryland</option>
        <option value="VA">Virginia</option>
    </select>

    <div>
        <button type="submit" class="btn btn-outline-secondary">Press</button>
    </div>
    }

<script type="text/javascript">
    $(document).ready(function () {
        $('.combobox').combobox();
    });
</script>

Как ясно, следует вернуть переменную TestDrop вКонтроллер.И когда я выбираю любой из заранее написанных выпадающих опций, Контроллер получает правильное значение.

Однако, когда я набираю собственное значение строки и нажимаю кнопку, я получаю пустую строку обратно.TestDrop = "" - это результат.

Что я должен сделать, чтобы получить желаемый результат, то есть записанное значение?Пожалуйста помогите.Спасибо.