[英]How to implement autocomplete in a modal using Jquery in MVC5
我有一个模态窗口,我想在其中显示 Jquery UI 的自动完成功能,该对象位于一个表单中,然后该表单将通过提交按钮发送到控制器操作
我的主视图中的模态窗口:
<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>
</div>
<form id="myForm">
<label>Producto</label>
<input type="text" class="form-control" name="nombreproducto" id="nombreproducto" autofocus="" />
<br />
<label>Precio Producto</label>
<br />
<input type="text" class="form-control" name="precio" id="idprecioproducto" />
</form>
</div>
<div class="modal-footer">
<input type="submit" 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>
我的主视图中的 Javascript 代码调用一个 JsonResult 方法来查找产品:
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>
$(function () {
$("#nombreproducto").autocomplete({
source: "/Recepcions/BuscarProducto"
});
});
</script>
}
我的控制器:
public JsonResult BuscarProducto(string term)
{
using (DataContext db = new DataContext())
{
var resultado = db.Productoes.Where(x => x.v_Nombre.Contains(term)).Select(y => y.v_Nombre).Take(10).ToList();
return Json(resultado, JsonRequestBehavior.AllowGet);
}
}
如何通过按下调用我的模态窗口的按钮来建立它
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#agregarProducto">Agregar Material </a>
我的模态窗口可以与自动完成我的产品一起显示吗?
我必须从我的按钮调用事件? 我在哪里放置 Jquery 代码? 这是我第一次必须开发类似的东西……我必须处理哪些 Jquery 事件?
PS:这个实现进入了我的控制器的 JsonResult,但显然它没有显示任何东西,为什么?
有什么例子或对我有帮助吗?
你用的是什么版本? 如果您根据JQuery UI Autocomplete的文档使用这些版本,由于冲突,这可能不适用于您的引导模式。
<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>
尝试在您的 Javascript 代码上使用这些版本,它可以工作:
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
这是基于您的代码的屏幕截图:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.