为什么在使用JQuery的父视图中自动完成功能不起作用? [英] Why Autocomplete is not working in parent view using JQuery?

问题描述

我在父视图中具有Autocomplete函数，并且在部分视图的text box中键入时，控件未命中父视图的Autocomplete函数.请指导我哪里出问题了.谢谢.

I have Autocomplete function in parent view and when I type in text box of partial view, control does not hit in Autocomplete function of parent view. Please guide me where I am getting wrong. Thank you.

父视图

  <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
   });

    };
   });
  });

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

Any suggestions or help will be highly appreciated.

推荐答案

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

You need to attach the plugin to your elements in the success callback of your elements, after the elements have been added to the DOM. To simplify this, give the textboxes a class name, say

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

，然后在脚本中将部分内容添加到DOM

and then in your script that adds the partial to the 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关联的元素需要一个单独的容器

Then modify the code in the select function to use relative selectors. Note that the elements associated with C need a separate container

<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);
        },
        ....

这篇关于为什么在使用JQuery的父视图中自动完成功能不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！