reboot777
@reboot777
нищий студент

Каким образом реализовать вывод результата по клику на подсказку?

Здравствуйте. Извиняюсь, что прошу помощи по столь ничтожному вопросу..но надеюсь, проясните. Разрабатываю серверное приложение. Одной из функций которого является "поиск".
Возникла мысль реализовать "живой поиск". Для этого использую JQuery Autocompete.
1. Реализовано в контроллере поиск по базе. Ищет по любым совпадениям: слово, буква, символ. Все как хотел.
2. На стороне представления реализованы подсказки, т.е. по мере ввода - предлагаются наиболее подходящие варианты.
3. Нужно чтобы по клику/ кнопке поиска на результат выдавало список записей таблицы, на которые можно было жмякнуть и посмотреть.
Я понимаю что для этого необходимо использовать обработчик события..но что-то недопетрю, каким образом оный обработчик реализовать.
Код представления привожу:
<code lang="html">
@model IEnumerable<dproject.Models.person>


@{
    ViewBag.Title = "Поиск";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<html>

<head>

    <script src='@Url.Content("~/Scripts/jquery-3.3.1.js")' type="text/javascript"></script>

    <link href='@Url.Content("~/Content/themes/base/all.css")' rel="stylesheet" type="text/css" />
    <style>
        li.ui-menu-item {
            font-size: 22px;
            font-family: Verdana;
        }
    </style>
</head>

<body>

    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <input type="text" name="name" data-autocomplete-source='@Url.Action("Search", "Poisk")' />
    <input type="submit" value="Поиск" id="search" />
    <div id="results"></div>


    <script src='@Url.Content("~/Scripts/jquery-ui-1.12.1.min.js")' type="text/javascript"></script>
    <script type="text/javascript">
// ниже пытался подцепить к "нажатию"
            $(document).ready(function () {
                $('#submit').click(function (e) {
                    e.preventDefault();
                    var name = $('#search').val();
                    name = encodeURIComponent(name);
                    $('#results').load('@Url.Action("Search", "Poisk")?name=' + name)
                });
            });
            $(function ($) {
                $("[data-autocomplete-source]").each(function () {
                    var target = $(this);
                    target.autocomplete({
                        source: target.attr("data-autocomplete-source")

                    });
                });

                });
    </script>
    </body>
</html>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
</code>

Спасибо за внимание.
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
like-a-boss
@like-a-boss
признайся, тебя тянет на код мужика
Не понял зачем жмякать на кнопку поиска, если по мере ввода улетают запросы и прилетают ответы из бд и, наверняка, показываются в виде выпадающего списка. Чтобы сделать элементы списка кликабельными, нужно передать в $.autocomplete({}) метод renderItem (пишу по памяти), ну и переопределить его на свой, чтобы рендерил элементы ссылками.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
СГМК-Трейд Новокузнецк
от 50 000 до 100 000 руб.
emex.ru Москва
от 160 000 до 190 000 руб.
RentaTeam Москва
от 110 000 до 180 000 руб.