如何在 ASP.NET Core 2.1 中使用自動完成輸入提升模態

Question

我需要在 ASP-NET Core 2.1 的模式內實現 JQuery 自動完成

問題是它沒有顯示任何內容，為什么我會出現這種行為？

我附上我的代碼：

    <html>
    <head>
        <meta http-equiv="content-type" content="text/html" charset="utf-8" />
    
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        @*<link rel="stylesheet" href="/resources/demos/style.css">*@
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
        <script>
            jQuery(document).ready(function ($) {
                    $("#txtSearch").autocomplete({
                        source: '@Url.Action("BuscarProducto")'
                    });
                });
        </script>
    
    </head>
    <body>
    
        <div style="margin-top:60px; margin-bottom:20px" align="right">
    
            <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#agregarProducto"><i class="glyphicon glyphicon-plus"></i> Agregar Material </a>
    
       
    </body>
    </html>

<!--MODAL AGREGAR PRODUCTO-->
<div class="modal fade" id="agregarProducto">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar Material</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-dismissible alert-info">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>Tener en cuenta!</strong> <a> para agregar más de una unidad habilite</a><strong> agregar cantidad.</strong>
                </div>
                <form id="myForm">
                    <label>Producto</label> &nbsp;&nbsp;
                    <input type="text" class="form-control" name="searchTerm" id="txtSearch" />
                    <br />

                    <br />
                    <label>Agregar Cantidad</label> &nbsp;&nbsp;
                    <input type="text" class="form-control" name="cantidad" id="idcantidad" />

                </form>
            </div>
            <div class="modal-footer">
                <input type="button" value="Agregar Material" class="btn btn-primary" id="btnSubmit" />
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

如您所見...我的 Json 方法返回從模態輸入的建議

但由於某種原因，它沒有顯示模式中指示的輸入中的建議，這是怎么回事？ 我忘了做什么？ 對我有什么幫助嗎？

Answer 1

您可以使用 apendTo 選項，如下所示：

更改您的 Html：

<form id="myForm">
    <label>Producto</label> &nbsp;&nbsp;
    <input type="text" class="form-control" name="searchTerm" id="txtSearch" />
        @*add this div*@

    <div id="Searchdata"></div>

    <br />
    <br />
    <label>Agregar Cantidad</label> &nbsp;&nbsp;
    <input type="text" class="form-control" name="cantidad" id="idcantidad" />
</form>

更改您的 jQuery：

jQuery(document).ready(function ($) {
    $("#txtSearch").autocomplete({
        source: '@Url.Action("BuscarProducto")'
    });
    $("#txtSearch").autocomplete("option", "appendTo", "#Searchdata");

});

結果：

如何在 ASP.NET Core 2.1 中使用自動完成輸入提升模態

問題描述

1 個解決方案

解決方案1
2 已采納 2020-08-03 02:21:39

如何在 ASP.NET Core 2.1 中使用自動完成輸入提升模態

問題描述

1 個解決方案

解決方案1 2 已采納 2020-08-03 02:21:39

解決方案1
2 已采納 2020-08-03 02:21:39