Question

我在父视图中有Autocomplete函数，当我输入部分视图的text box时，控件没有点击父视图的Autocomplete函数。请指导我出错的地方。谢谢。

父视图

  <div id="Reports" > </div> //displays the partial view

部分视图

 <div class="ABC">                    
    <div id="A" class="container">
        @Html.TextBoxFor(m => m.txtA)
        @Html.HiddenFor(m => m.hiddenAId)
    </div>  

      <div id="B" class="container">
            @Html.TextBoxFor(m => m.txtB)
            @Html.HiddenFor(m => m.hiddenBId)
        </div>   
      <div id="C" class="container">
            @Html.TextBoxFor(m => m.txtC)
            @Html.HiddenFor(m => m.hiddenCId)
            </div> 
    </div>

部分加载

$('.search').click(function () {
    var id = $(this).data('assigned');
    var route = '@Url.Action("DisplayPartialView", "ABC")?id=' + id;
    $('#Reports').load(route);
});

自动完成

     $(document).ready(LoadAutocomplete);
        function LoadAutocomplete() {
        $('#Reports').on('change', '.ABC input[type = "text"]', function () {
           AutoComplete("#txtA", "#hiddenAId", '');
           });
        }

     $(document).ready(function () {
      $('#Reports').on('change', '.ABC input[type = "text"]', function () {
          function AutoComplete(txtid, hiddenID, sType) {
             $(txtid).autocomplete({
               source: function (request, response) {
                  $.ajax({
                    url: '/Test/AutoComplete/',
                     data: "{ 'prefix': '" + request.term.replace("'", "%37") + "','sT':'" + sT + "'}",
                     dataType: "json",
                      type: "Post",
                      contentType: "application/json; charset=utf-8",
                      success: function (data) {    
                       response($.map(data, function (item) {
                         return {
                           value: item.Name,
                           id: item.Id
                          };
                      }))
                },
               error: function (response) {
                  alert(response.responseText);
               },
              failure: function (response) {
                   alert(response.responseText);
                }
              });
            },
          select: function (event, ui)             {                                                                       $(hiddenID).val(ui.item.value);
     $(hiddenID).val(ui.item.id);
       },

     minLength: 1
   });

    };
   });
  });

任何建议或帮助都将受到高度赞赏。

Answer 1

在将元素添加到DOM之后，您需要将插件附加到元素的success回调中的元素中。为简化此操作，请为文本框指定一个类名称，例如

 @Html.TextBoxFor(m => m.txtA, new { @class = "autocomplete" })
 @Html.HiddenFor(m => m.hiddenAId, new { @class = "hidden-input" })

然后在您的脚本中将部分添加到DOM

$('.search').click(function () {
    var id = $(this).data('assigned');
    var route = '@Url.Action("DisplayPartialView", "ABC")?id=' + id;
    $('#Reports').load(route, function() {
        $.each($('.autocomplete', function(index, item) {
            $(this).autocomplete({
                source: function (request, response) {
                    ....
                },
                select: function (event, ui) {
                    ....
                },
                minLength: 1
            });
        });
    });
});

然后修改select函数中的代码以使用相对选择器。请注意，与C关联的元素需要单独的容器

<div id="B" class="container">
    @Html.TextBoxFor(m => m.txtB, new { @class = "autocomplete" })
    @Html.HiddenFor(m => m.hiddenBId, new { @class = "hidden-input" })
</div>
<div id="C" class="container">
    @Html.TextBoxFor(m => m.txtC, new { @class = "autocomplete" })
    @Html.HiddenFor(m => m.hiddenCId, new { @class = "hidden-input" })                           
</div>

然后脚本变为

$.each($('.autocomplete', function(index, item) {
    // Get the associated hidden input
    var hiddenInput = $(this).closest('.container').find('.hidden-input');
    $(this).autocomplete({
        source: function (request, response) {
            ....
        },
        select: function (event, ui) {
            // update the value of the hidden input
            hiddenInput.val(ui.item.id);
        },
        ....

为什么Autocomplete在使用JQuery的父视图中不起作用？

1 个答案: