Question

我希望有两个不同的自动填充框，但在后台使用相同的AJAX方法。这是我的剧本

$(document).ready(function () {
    $("#SearchProject")
        .each(function () {
            var urlloc = "/Project/FindProjects";
            $(this).autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: urlloc, type: "POST", dataType: "json",
                        data: { searchString: request.term, maxResults: 10 },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.name, value: item.name, id: item.id }
                            }))
                        }
                    })
                },
                select: function (event, ui) {
                    $("[id$='ProjectID']").val(ui.item.id);
//                    alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id)
//                    : "Nothing selected, input was " + this.value);

                }
            });
        });
    });

我希望表单上的输入字段如下所示。

 <input id="SearchProject" name="SearchProject" type="text" value="" /><input  type="hidden" name="ProjectID" id="ProjectID" value="" />

    <input id="SearchProject2" name="SearchProject" type="text" value="" /><input type="hidden" name="ProjectID" id="ProjectID2" value="" />

当自动完成选择完成时，我希望更新相应的隐藏字段。我如何实现这一目标？

Answer 1

两种可能性：

首先（我更喜欢的那个）：将自动完成设置解压缩为方法：

function configureAutocomplete(autoField, updatedField)

您可以根据需要为自动完成字段调用此方法，并为其传递两个JQuery选择器：自动完成字段的选择器和隐藏的更新字段。

另一种方法是将隐藏字段的ID基于自动完成字段的ID。这将允许您使用each将行为附加到字段，但我认为它比它的价值更麻烦。

使用相同Ajax的多个自动完成框

1 个答案: