为什么自动完成在使用 JQuery 的父视图中不起作用？答案

【问题标题】：Why Autocomplete is not working in parent view using JQuery?为什么自动完成在使用 JQuery 的父视图中不起作用？
【发布时间】：2018-03-06 02:14:37
【问题描述】：

我在父视图中有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
   });

    };
   });
  });

任何建议或帮助将不胜感激。

【问题讨论】：

如果文本框（为时已晚），在change() 事件上附加插件没有多大意义。您需要在将部分添加到 DOM 时执行此操作。是最初添加的部分，还是查看 ajax？
@StephenMuecke，感谢您抽出宝贵时间。仅当从主视图单击按钮以查看部分时才会加载部分。请指导我。
什么按钮？您需要显示相关代码，包括加载您部分的 ajax 代码。
@StephenMuecke，我已经编辑了这个问题。请看一看。谢谢。
@StephenMuecke，请慢慢来。谢谢。

标签： jquery asp.net-mvc

【解决方案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);
        },
        ....

【讨论】：

帮助很大！ @StephenMuecke