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

Posted 2023-05-08

【中文标题】MVC模式窗口中的jQuery UI自动完成

【英文标题】：jQuery UI Autocomplete in MVC modal window

【发布时间】：2018-06-08 04:57:18

【问题描述】：

我正在尝试在 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>

我的模态窗口：

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

【问题讨论】：

你可以尝试在模态显示后运行$("#producto").autocomplete 吗？在完全显示模式之前，jQuery 可能无法进行正确的 DOM 操作。您需要处理 shown.bs.modal 事件。

您是否建议我在调用模式的脚本中进行更改？或在模态中更改脚本？ @kettch

我会从顶部的 $(document).ready 函数中执行此操作，就在您调用 show 之前就可以了。

我这样修改了我的代码...显示模态后，激活自动完成功能.... if (url.indexOf ('#') == 0) $ ('#添加产品'）。模态（'显示'）； $（“#产品”）。模态（'show.bs.modal'）； @kettch 但不工作:(

我已经添加了一个希望能澄清事情的答案。 @Fytito Ambiado

【参考方案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>

【讨论】：

具体是什么不起作用？预期行为是什么，实际行为是什么？另外，您知道shown.bs.modal 事件代码是否正在运行？请将更新后的代码添加到问题的末尾，以便我们在上下文中查看它。

具体来说，自动完成功能不起作用，预期的行为是在我的模态窗口中......建议的产品名称和实际行为......它没有任何建议附上一张图片以获得更多细节（编辑问题）@kettch

好的，你能验证事件处理程序是否正在执行吗？

我附上了我的控制台截图，希望能帮到@kettch

嗯...没什么特别的。也许将调试器语句作为事件处理程序的第一行，看看它是否被命中？