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

I'm trying to implement the autocomplete jQuery UI function in a Bootstrap modal window, but it does not work.

我正在尝试在Bootstrap模式窗口中实现自动完成jQuery UI功能,但它不起作用。

screenshot module console debug

截图模块控制台调试

Take the steps of not returning a partial view, also already implement jQuery CSS styles, the truth works for me in full views, but why when calling a modal window does not? any help for me?

采取不返回局部视图的步骤,也已经实现了jQuery CSS样式,真实在全视图中适用于我,但为什么在调用模态窗口时没有?对我有什么帮助?

My Script of where I call the Modal window:

我在哪里调用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').modal('show');
            }
            else {
                $.get(url, function (data) {
                    $('#AgregarProducto .te').html(data);
                    $('#AgregarProducto').modal();
                }).success(function () { $('input:text:visible:first').focus(); });    
            }
        });
    });
</script>

My Modal Windows:

我的模态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>    
    }

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

1 个解决方案

#1

Try to add an event handler for shown.bs.modal before you show the modal itself.

在显示模态本身之前,尝试为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>