输入/数据列表自动完成不显示

Question

我有一个网站，我正在尝试使用动态input合并自动完成datalist。一切正常，除了列表并不总是会下拉，但检查器显示datalist已按预期填充。

当您在input（文本框）中输入条目时，下拉菜单应出现3个字符，但很少出现。您可以打开Inspector并查看datalist的填充，但它并未显示。当您键入更多字符时，它可能会或可能不会出现。但是，击退空格似乎要使它出现的次数更多。我已经尝试过剔除打字计时器代码以及最少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 + ')'
                }));
            });
        });
}