MVC模式窗口中的jQuery UI自動完成

Question

我試圖在Bootstrap模式窗口中實現自動完成jQuery UI功能，但它不起作用。

screenshot module console debug

拿不回來的局部視圖的步驟，也已經實現了jQuery的CSS樣式，真相對我的作品的全部景色，但爲什麼叫模態窗口不會是什麼時候？對我有幫助嗎？

，我所說的模態窗口的我的腳本：

<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> 

我Modal窗口：

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

我的控制器：

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

嘗試添加的事件處理程序shown.bs.modal在展示模態本身之前。

<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>