Question

在我的代码中我有那个脚本：

<script type="text/javascript">
  var counter = 0;
  $(function () {
    $("#tags").autocomplete({
      source: "/Home/TakeSurowce",
      minLength: 0,
      select: function (event, ui) {
        if (ui.item) {
          $('input[name="Surowiec[' +counter+ '].SurowiecID"]').attr('value', ui.item.id);
        }
      }
    });
  });
</script>

它工作得很好，但我不知道如何在其他功能中使用完全相同的功能：

 <script type="text/javascript">
  var num = 1;
  function addRow() {
    $("#cialoTabeli")
    .append($('<tr></tr>')
    .append($('<td style="width: 100px" id="tdWithAutocomplete"></td>')
            .append($('<input type="hidden" name="Surowiec[' + num + '].SurowiecID" value=""/>'))
            .append($('<input id="tags" name="Surowiec[' + num + '].Nazwa" />').autocomplete({
                source: "/Home/TakeSurowce",    
                minLength: 0,
                select: function (event, ui) {         // this don't work !!!
                    if (ui.item) {
                        $('input[name="Surowiec[' + num + '].SurowiecID"]').attr('value', ui.item.id);
                    }
                }
            })
            ) // end of input with AUTOCOMPLETE
    ) // end of td with AUTOCOMPLETE

    .append($('<td style="width: 100px"></td>')
        .append($('<input id="SurowiecIlosc" name="SurowiecIlosc[' + num + ']" type="text" value="" />'))
    )
    .append($('<td></td>')
        .append($('<input type="button" value="+" onclick="addRow()" />'))
    )
);  // END OF TR
    num++;

};  // WHOLE FUNCTION ENDS
</script>

.autocomplete函数中的选择事件不起作用（在addRow（）函数内部）。此事件从自动完成中获取所选项的id，并将id值放入隐藏输入类型的value属性。有谁知道为什么这不起作用，它应该如何正常工作？这很奇怪，因为除了这个选择事件之外的一切都有效。谢谢你的帮助。

Answer 1

您需要逃避[和]

 $('input[name="Surowiec\\[' +counter+ '\\].SurowiecID"]').attr('value', ui.item.id);

我试图重新创建你的场景，这就是我在控制器中所做的

    public JsonResult SO()
    {
        var infrastruktury = new MyClass2().FindAllInfrastruktury();

        return Json(infrastruktury, JsonRequestBehavior.AllowGet); 

    }
    public class MyClass
    {
        public int id { get; set; }
        public string value { get; set; }          

    }

    public class MyClass2
    {
        public IList<MyClass> FindAllInfrastruktury()
        {
            return Enumerable.Range(1, 5).Select(x => new MyClass
            {
                id = x,
                value = "value" + x
            }).ToList();               
        }

    }

在我看来

  $("#tags").autocomplete({
          source: "/Home/SO",
          minLength: 0,
          select: function (event, ui) {
              console.log(ui.item.id);   <-- i got the selected id here         
          }
      });

请确认您从服务器获取了正确的数据

Answer 2

这有效：

<script type="text/javascript">
var num = 1;
function addRow() {
    $("#cialoTabeli")
    .append($('<tr></tr>')
        .append($('<td style="width: 100px" id="tdWithAutocomplete"></td>')

                .append($('<input id="tags" name="Surowiec[' + num + '].Nazwa" />').autocomplete({
                    source: "/Home/TakeSurowce",
                    minLength: 0,
                    select: function (event, ui) {
                        if (ui.item) {
                            $('input[name="Surowiec[' + num + '].SurowiecID"]').attr('value', ui.item.id);
                            var hidden = $(this).parent().find('input[type="hidden"]')[0];
                            $(hidden).val(ui.item.id);
                        }
                    }
                }) // KONIEC INPUTA Z FUNKCJA jQUERY AUTOCOMPLETE

                ).append($('<input type="hidden" name="Surowiec[' + num + '].SurowiecID" value="" />'))
        ) // KONIEC TD Z jQUERY AUTOCOMPLETE

        .append($('<td style="width: 100px"></td>')
            .append($('<input id="SurowiecIlosc" name="SurowiecIlosc[' + num + ']" type="text" value="" />'))
        )
        .append($('<td></td>')
            .append($('<input type="button" value="+" onclick="addRow()" />'))
        )
    );      // KONIEC TR
        num++;

};  // KONIEC CALEJ FUNKCJI
</script>

在函数append中引发的自动完成功能中的选择事件不起作用

2 个答案: