如何在每个循环中的jQuery中使用自动完成功能？

Question

我正在使用jQuery生成表。在每一行中，我都有一个输入字段，该字段应从DB usibg自动完成功能中搜索一些值。第一行可用于perfectley，但第二行却有问题，它仅在上述字段中自动返回一个值，我不知道该如何解决...有人可以帮忙吗？

这是我的代码：

 $.ajax({
    type: "GET",
    url: "/Home/JsonWeekEvents",
    dataType: "JSON",
    success: function (result) {
        $.each(result, function (i, val) {

            var trow = $('<tr/>').data("id", val.Id);
            //trow.append('<td>' + val.Id + "&nbsp;" + '</td>');
            trow.append('<td style="padding:5px; width:100px; height:70px"></td>');
            trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
                            '<div class="ui-widget">' +
                                    '<input  size="10" maxlength="10" id="tagsM" class="tags" />' +
                                        '<input type="button" id="addBtn" onclick="addEvent();" size="5" value="+" /><br/>' +
                                             '<div style="text-align:center" id="desc_Num">' + val.Monday + '</div >' +
                            '</div >' +
                        '</td>');

            tab.append(trow);
        });

        $("tr:odd", tab).css('background-color', '#C4C4C4');
        $("#weekEvents").html(tab);
    },
    error: function () {
        alert("Failed! Please try again.");
    }
});
var tab = $('<table class=MyTable border=1 ></table>');
var thead = $('<thead></thead>');

thead.append('<th style="padding:5px">FSE' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Monday' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Tuesday' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Wednesday' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Thursday' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Friday' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Saturday' + "&nbsp;" + '</th>');
thead.append('<th style="padding:5px">Sunday' + "&nbsp;" + '</th>');

tab.append(thead);


tab.on("focus", "input[class='tags']", function (e) {

    //var prefix = $('.tags').val();

    $('.tags').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Home/GetSearchValue",
                dataType: "json",
                data: { search: $('.tags').val() },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {

                            label: item.Title + ', ' + item.Description, value: item.Title,

                            Id: item.Id,
                            Title: item.Title,
                            Description: item.Description,
                            Location: item.Location
                        }
                    }));
                },
                error: function (xhr, status, error) {
                    alert("Error!" + xhr);
                },

            });
        }
    });

Answer 1

建议以下内容：

tab.on("focus", "input[class='tags']", function(e) {
  if (!$(this).hasClass("ui-autocomplete")) {
    $(this).autocomplete({
      source: function(request, response) {
        $.getJSON("/Home/GetSearchValue", {
            search: request.term
          },
          function(data) {
            response($.map(data, function(item) {
              return {
                label: item.Title + ', ' + item.Description,
                value: item.Title,
                Id: item.Id,
                Title: item.Title,
                Description: item.Description,
                Location: item.Location
              }
            }));
          });
      }
    });
  }
});

这将在focus事件上初始化自动完成。如果已经初始化，则不会重复。源将执行GET请求，并在该特定字段上从用户输入中搜索request.term。