Question

我有一个将自动完成功能附加到文本框的功能。问题是它调用了两次。我创建了一个下拉列表来选择类型，当我选择类型并在文本框中写入任何文本时，自动完成仅调用一次，此后我更改了类型，这一次它将调用先前的自动完成源方法，然后调用新的一个源方法。（例如，如果我第一次选择case类型，第二次选择contact类型，那么它将首先调用case源方法，然后再调用else(Contact)源方法）选择类型值（Case，Contact）。从ajax（Soft Client testing@@2328||Test@@2258||TEst Entity@@2384||Test company@@2382）返回的样本数据

function LoadData() {
    var Type = $('#slctType').val();
    var Text = $('#tags').val();
    if (Type == "Case") {
        $("#tags").autocomplete({
            source: function (request, response) {
                alert("Case");
                $.post('../MasterPages/Ajax/ajaxSearch.ashx', { "Type": Type, "Text": Text }, function (data) {
                    try {
                        if (data != null) {
                            if (data.indexOf('error') == 0) {
                                display(data, "Error");
                            }
                            else {
                                var arrData = data.split("@@");
                                var sourceData = [];

                                for (var i = 0; i < arrData.length; i++) {
                                    var arrValue = arrData[i].split("||");
                                    sourceData.push({ "value": arrValue[0], "label": arrValue[1] });
                                }
                                if (sourceData.length != 0) {
                                    response($.map(sourceData, function (item) {
                                        return item;
                                    }));
                                }
                                else {
                                    response([]);
                                }
                            }
                        }
                    }
                    catch (Error) {
                        display("On text change : " + Error, "Error");
                    }
                });
            },
            focus: function (event, ui) {
                // prevent autocomplete from updating the textbox
                event.preventDefault();
                // manually update the textbox
                $(this).val(ui.item.label);
            },
            select: function (event, ui) {
                // prevent autocomplete from updating the textbox
                event.preventDefault();
                // manually update the textbox and hidden field
                $(this).val(ui.item.label);
                ID = ui.item.value;

            }
        }).data("autocomplete")._renderItem = function (ul, item) {
            var arrV = item.value.split("-");
            var listItem = $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a class = '" + arrV[1] + "Color'>" + item.label + "</a>")
                .appendTo(ul);
            return listItem;
        };
    }
    else {
        $("#tags").autocomplete({
            source: function (request, response) {
                alert("Non Case");
                $.post('../MasterPages/Ajax/ajaxSearch.ashx', { "Type": Type, "Text": Text }, function (data) {
                    try {
                        if (data != null) {
                            if (data.indexOf('error') == 0) {
                                display(data, "Error");
                            }
                            else {
                                var arrData = data.split("@@");
                                var sourceData = [];

                                for (var i = 0; i < arrData.length; i++) {
                                    var arrValue = arrData[i].split("||");
                                    sourceData.push({ "value": arrValue[0], "label": arrValue[1] });
                                }
                                if (sourceData.length != 0) {
                                    response($.map(sourceData, function (item) {
                                        return item;
                                    }));
                                }
                                else {
                                    response([]);
                                }
                            }
                        }
                    }
                    catch (Error) {
                        display("On text change : " + Error, "Error");
                    }
                });
            },
            focus: function (event, ui) {
                // prevent autocomplete from updating the textbox
                event.preventDefault();
                // manually update the textbox
                $(this).val(ui.item.label);
            },
            select: function (event, ui) {
                // prevent autocomplete from updating the textbox
                event.preventDefault();
                // manually update the textbox and hidden field
                $(this).val(ui.item.label);
                ID = ui.item.value;

            }
        });
    }
}

function ChangeType() {
    $('#tags').val('');
    ID = 0;
    $("#tags").removeData('autocomplete');
    $('#tags').autocomplete("destroy");
}

function OnTextChange(event) {
    LoadData();
}

<select id="slctType" onchange="ChangeType();">
    <option value="Case">Case</option>
    <option value="Contact">Contact</option>
    <option value="BOL">BOL</option>
    <option value="Security">Security</option>
    <option value="CompanyName">Entity Name</option>
</select>

<input id="tags" type="text" onkeyup="javascript:OnTextChange(event);" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">

Answer 1

在您的代码中，LoadData()在用户键入时每运行一次。这是没有意义的。它试图在自动完成尝试工作的同时重新创建自动完成-自动完成等待同一元素上的keyup事件！您只需要在用户更改选择时运行LoadData（）-即可初始化自动完成功能。摆脱掉{tags}元素上的onkeyup，并在LoadData()函数的末尾调用ChangeType()。页面加载时，您可能还需要运行一次，以使用默认选项对其进行初始化

也

$.post('../MasterPages/Ajax/ajaxSearch.ashx', { "Type": Type, "Text": Text }, function (data) {

是一个问题-您应该使用request.term来获取用户当前正在键入的内容-请参见条目“功能”部分的http://api.jqueryui.com/autocomplete/#option-source。相反，现在您要发送的是上一次LoadData运行时文本框中的内容，可能不一样。与“类型”相同。

使用

$.post('../MasterPages/Ajax/ajaxSearch.ashx', { "Type": $('#slctType').val(), "Text": request.term }, function (data) {

将最新信息发送到服务器。

jQuery自动完成源调用了两次

1 个答案: