Как реализовать автозаполнение в модальном с использованием Jquery в MVC5

Question

У меня есть модальное окно, в котором я хочу отобразить автозаполнение пользовательского интерфейса Jquery, этот объект находится внутри формы, которая затем будет отправлена ​​с помощью кнопки отправки в действие контроллера

мое модальное окно в моем главном представлении:

<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> &nbsp;&nbsp;
                    <input type="text" class="form-control" name="nombreproducto" id="nombreproducto" autofocus="" />
                    <br />
                    <label>Precio Producto</label> &nbsp;&nbsp;
                    <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 моего контроллера, но, очевидно, он ничего не отображает, почему?

любой пример или помощь для меня?

Answer 1

Какую версию вы используете?Если вы используете эти версии на основе документации 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>

Вот скриншот, основанный на вашем коде: