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

JQuery Autocomplete textbox behavior issues

本文关键字:问题 文本 JQuery      更新时间:2023-09-26

我有一个自动完成输入,在页面加载时,当用户输入一个值时,建议列表就会填充。然而,当用户仍然有输入焦点时,他们删除文本,然后输入其他内容,什么也没有发生。我的理论是,这与在文档加载时调用主方法的位置有关。我试图改变观察输入长度的功能,但仍然有同样的问题。总之,下面是代码:

主要调用:

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

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

检查您是否在更改事件中完成了"$('#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);
        }
    });
});