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

Question

我有一个网站，我试图在其中input使用动态的datalist. 一切正常，除了列表并不总是下拉但检查器显示datalist按预期填充。

当您在input（文本框）中输入条目时，在 3 个字符后应该会出现下拉菜单，但很少会出现。您可以打开 Inspector 并查看datalist确实填充但它只是不显示。当您键入更多字符时，它可能会出现，也可能不会出现。但是，按退格键似乎比不出现的次数更多。我已经尝试取出 typingTimer 代码以及 2 个字符的最小代码。我什至将其更改为 AJAX 调用，因此我可以尝试添加异步参数，但没有运气。我难住了。

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 + ')'
                }));
            });
        });
}

标签： jqueryasp.net-mvcautocomplete