Fatal编程技术网
  • javascript/
  • Javascript 如何在ASP.NET Core 2.1中使用自动完成输入提出模式

Javascript 如何在ASP.NET Core 2.1中使用自动完成输入提出模式

javascript jquery asp.net asp.net-core autocomplete

Javascript 如何在ASP.NET Core 2.1中使用自动完成输入提出模式,javascript,jquery,asp.net,asp.net-core,autocomplete,Javascript,Jquery,Asp.net,Asp.net Core,Autocomplete,我需要在ASP-NETCore2.1中的模式中实现JQuery自动完成 问题是它没有显示任何东西，为什么我会有这种行为 我附上我的代码： <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8" /> <link rel="

我需要在ASP-NETCore2.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>


@**@
jQuery（文档）.ready（函数（$）{
$（“#txtSearch”）.autocomplete({
来源：'@Url.Action（“BuscarProducto”）'
});
});
Agregar材料
&时代；
&时代；
Tener en cuenta


但由于某些原因，它没有显示模态中所示输入中的建议，发生了什么？我忘记做什么了？有什么帮助吗？
您可以使用以下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(document).ready(function ($) {
    $("#txtSearch").autocomplete({
        source: '@Url.Action("BuscarProducto")'
    });
    $("#txtSearch").autocomplete("option", "appendTo", "#Searchdata");

});