JQuery自动填充文本框行为问题

时间:2016-10-14 16:42:41

标签: javascript jquery ajax autocomplete

我有一个自动填充输入,在页面加载时,当用户输入值时,填充建议列表。但是,虽然用户仍然具有该输入焦点,并且他们删除了文本,但是然后键入其他内容,则没有任何反应。 我的理论是,它与主要方法的调用位置有关 - 文档加载。我试图改变观察输入长度的功能,但仍然遇到同样的问题。无论如何,这是代码:

主要电话:

$(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);

        }


    });

};

视图

 <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>

1 个答案:

答案 0 :(得分: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);
        }
    });
});