如何在 ASP.NET Core 2.1 中使用自动完成输入引发模态
How to raise a modal with an autocomplete input in 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">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-dismissible alert-info">
<button type="button" class="close" data-dismiss="alert">×</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>
<input type="text" class="form-control" name="searchTerm" id="txtSearch" />
<br />
<br />
<label>Agregar Cantidad</label>
<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 方法 returns 从模态输入的建议
但由于某种原因,它没有在模态指示的输入中显示建议,这是怎么回事?我忘了做什么?对我有什么帮助吗?
您可以使用如下所示的 apendTo 选项:
改变你的Html:
<form id="myForm">
<label>Producto</label>
<input type="text" class="form-control" name="searchTerm" id="txtSearch" />
@*add this div*@
<div id="Searchdata"></div>
<br />
<br />
<label>Agregar Cantidad</label>
<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
的模式中实现 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">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-dismissible alert-info">
<button type="button" class="close" data-dismiss="alert">×</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>
<input type="text" class="form-control" name="searchTerm" id="txtSearch" />
<br />
<br />
<label>Agregar Cantidad</label>
<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 方法 returns 从模态输入的建议
但由于某种原因,它没有在模态指示的输入中显示建议,这是怎么回事?我忘了做什么?对我有什么帮助吗?
您可以使用如下所示的 apendTo 选项:
改变你的Html:
<form id="myForm">
<label>Producto</label>
<input type="text" class="form-control" name="searchTerm" id="txtSearch" />
@*add this div*@
<div id="Searchdata"></div>
<br />
<br />
<label>Agregar Cantidad</label>
<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");
});
结果: