如何在ASP.NET Core 2.1中使用自动完成输入引发模式

克里斯托弗·安比亚多

我需要在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方法返回从模态输入的建议

但是由于某种原因，它没有在模式中指示的输入中显示建议，这是怎么回事？我忘了做什么？对我有帮助吗？

瑞娜

您可以使用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");

});

结果：