jQuery UI Autocomplete in MVC modalen Fenster

Question

Ich versuche, die Autocomplete jQuery UI-Funktion in einem Bootstrap-modalen Fenster zu implementieren, aber es funktioniert nicht.

screenshot module console debug

Nehmen Sie die Schritte nicht eine Teilansicht, die auch bereits implementieren jQuery CSS-Stile, die Wahrheit für mich arbeitet in vollen Ansichten Rückkehr, aber warum, wenn ein modales Fenster nicht nicht nennen? irgendeine Hilfe für mich?

My Script von wo ich nenne das modale Fenster:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("body").on("click", "a.dialog-window", null, function (e) { 
      e.preventDefault(); 
      var $link = $(this); 
      var title = $link.text(); 
      $('#AgregarProducto.modal-title').html(title); 
      var url = $(this).attr('href'); 
      if (url.indexOf('#') == 0) { 
       $('#AgregarProducto').modal('show'); 
      } 
      else { 
       $.get(url, function (data) { 
        $('#AgregarProducto .te').html(data); 
        $('#AgregarProducto').modal(); 
       }).success(function() { $('input:text:visible:first').focus(); });  
      } 
     }); 
    }); 
</script> 

Mein Modal Windows-:

<div class="form-group">   
     <div class="col-md-10"> 
      <input type="text" name="producto" id="producto" />    
     </div> 
    </div> 

    @section Scripts {  

     @Scripts.Render("~/bundles/jqueryval")  
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script> 

    <script> 
      $(function() { 
       $("#producto").autocomplete({ 
        source: "/Salidas/BuscarProducto" 
       }); 
      }); 
    </script>  
    } 

Mein Controller:

public JsonResult BuscarProducto(string term) 
    { 
     using (DataContext db = new DataContext()) 
     { 
      var resultado = db.Productos.Where(x => x.v_Nombre.Contains(term)).Select(y => y.v_Nombre).Take(5).ToList(); 

      return Json(resultado, JsonRequestBehavior.AllowGet); 
     } 
    } 

Answer 1

Versuchen einen Event-Handler für shown.bs.modal hinzufügen bevor Sie das Modal selbst zeigen.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("body").on("click", "a.dialog-window", null, function (e) { 
      e.preventDefault(); 
      var $link = $(this); 
      var title = $link.text(); 
      $('#AgregarProducto.modal-title').html(title); 
      var url = $(this).attr('href'); 
      if (url.indexOf('#') == 0) { 
       $('#AgregarProducto').on('shown.bs.modal', function() { 
        $("#producto").autocomplete({ 
         source: "/Salidas/BuscarProducto" 
        }); 
       } 
       $('#AgregarProducto').modal('show'); 
      } 
      else { 
       $.get(url, function (data) { 
        $('#AgregarProducto .te').html(data); 
        $('#AgregarProducto').modal(); 
       }).success(function() { $('input:text:visible:first').focus(); });  
      } 
     }); 
    }); 
</script>