javascript - JQuery 自动完成文本框行为问题

Question

我有一个自动完成输入，在页面加载时，当用户输入值时，建议列表会填充。然而，虽然用户仍然拥有该输入焦点，并且他们删除了文本，但随后键入了其他内容，但什么也没有发生。我的理论是，这与在文档加载时调用主方法的位置有关。我尝试更改监视输入长度的函数，但仍然遇到同样的问题。无论如何，这是代码:

主要调用:

$(document)
.ready(function() {
    $('#autocompleteCR')
        .change(function() {
            if ($('#autocompleteCR').val().length > 0) {
                autoCompleteCheckRun();
            }
        });
});

函数体:

function autoCompleteCheckRun() {
$('#autocompleteCR')
    .autocomplete({
        minLength: 2,
        source: function (request, response) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: './PayInvoicesWS.asmx/GetCheckRun',
                data: "{'description':'" + document.getElementById('autocompleteCR').value + "'}",
                dataType: "json",
                success: function (data) {

                    var el = data.d;
                    response($.map(el,
                        function (el) {
                            return {
                                label: "CheckRunID:" + " " + el.CheckRunID + " " + el.Description,
                                value: el.CheckRunID
                            }
                        }));
                    calculateTotal();
                    doStep2();
                },
                error: function (result) {
                    alert("Error");
                }
            });
        },
        select: function (event, ui) {

            $("#CheckRunDescription").val(ui.item.label);
            $("#autocompleteCR").val(ui.item.value);
            $("#vendor_payment_type").prop("disabled", false);

        }


    });

};

View

 <div class="divTableCell">
                    <div class="ui-widget">
                        <label for="autocompleteCR" id="checkRunLabel" style="font-size: 0.8em !important;">Check Run Lookup:</label>
                        <input type="text" id="autocompleteCR" />
                    </div>

                </div>

Answer 1

您不需要每次在输入发生更改事件时都应用自动完成功能。

检查您是否已在更改事件中完成“$('#autocompleteCR').val().length > 0”，该操作将由自动完成的 minLength 属性完成。

您只需在文档准备就绪时应用自动完成功能。这可能会解决您的问题。

$(document).ready(function() {
    $('#autocompleteCR').autocomplete({
        minLength: 2,
        source: function (request, response) {
          $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: './PayInvoicesWS.asmx/GetCheckRun',
                data: "{'description':'" + document.getElementById('autocompleteCR').value + "'}",
                dataType: "json",
                success: function (data) {
                       var el = data.d;
                       response($.map(el,
                       function (el) {
                       return {
                          label: "CheckRunID:" + " " + el.CheckRunID + " " + el.Description,
                          value: el.CheckRunID
                       }
                     }));
                     calculateTotal();
                     doStep2();
                },
                error: function (result) {
                     alert("Error");
                }
          });
        },
        select: function (event, ui) {
            $("#CheckRunDescription").val(ui.item.label);
            $("#autocompleteCR").val(ui.item.value);
            $("#vendor_payment_type").prop("disabled", false);
        }
    });
});