Автозаполнение ввода / списка данных не отображается

Question

У меня есть сайт, где я пытаюсь включить автозаполнение input, используя динамический datalist.Все работает отлично, за исключением того, что список не всегда выпадает, но инспектор показывает, что datalist заполнено, как и ожидалось.

Когда вы вводите запись в input (текстовое поле), после 3 символов выпадающийдолжен появиться, но редко появляется.Вы можете открыть Инспектор и увидеть, что datalist заполнило, но оно просто не отображается.По мере ввода большего количества символов оно может отображаться или не отображаться.Тем не менее, ударяя по backspace, кажется, чаще, чем не заставлять его появляться.Я попытался убрать код typingTimer, а также минимальный код из 2 символов.Я даже изменил его на вызов AJAX, чтобы попытаться добавить параметр async, но не повезло.Я в тупике.

HTML

<td>
    <input id="txtTerritorySub" list="dlTerritorySub" name="TerritorySub" style="width:300px;"placeholder="City/Parrish" />
    <datalist id="dlTerritorySub" style="width:auto;">
    </datalist>
</td>

JQuery

$(document).ready(function () {
    $('#txtTerritorySub').bind("input", (function () {
        var typingTimer;
        var element = $(this);
        var srchStr = element.val();

        clearTimeout(typingTimer);
        if (srchStr.length > 2) {
            typingTimer = setTimeout(getMatches(element, srchStr), 500);
        }
    }));
});

function getMatches(element, srchStr) {
    $("#dlTerritorySub").empty();
        $.post('Customer/getTerritorySubs', { 'srchStr': srchStr },
        function (result) {
            $(result).each(function (i, item) {
                $("#dlTerritorySub").append($("<option>", {
                    value: item.territoryCode,
                    text: item.territorySubName + ' (' + item.territoryName + ', ' + item.countryName + ')'
                }));
            });
        });
}