Мне нужна помощь для автозаполнения в текстовом поле с идентификатором и текстом - PullRequest
Новая
       6

Мне нужна помощь для автозаполнения в текстовом поле с идентификатором и текстом

0 голосов
/ 04 июля 2019

Я новичок в asp.net и пытаюсь добавить строку поиска с автозаполнением.

Я хочу, чтобы результат возвращал список объектов, результат хранимой процедуры в двух таблицах сболее 200 000 строк каждая (30 лучших результатов для автозаполнения), с 2 полями: метка (Resultat) и Id (IdRes).

Мне удалось вызвать свою функцию, я получил свой результат, ноавтозаполнение всплывающее окно не показывает или неправильно.

Вот код моего _layout.cshtml: 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - CLAP : le colloque du cinéma</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")


    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#navinput").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "Home/RechercheAutoComplete",
                        data: "{'term':'" + $("#navinput").val() + "'}",
                        datatype: "json",
                        success: function (data) {
                            response($.map(data, function (value, key) {
                                return {
                                    label: value.Resulat,
                                    value: value.Resulat
                                }
                            }));
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }
            });
        });
    </script>

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
             <div class="navbar-collapse collapse">
...
                <div class="navbar-form navbar-left" role="search">
                    <div class="formgroup">
                        <input class="form-control" id="navinput" name="navinput" runat="server" type="text" width="512" placeholder="Search..." />
                        <button class="btn btn-default glyphicon glyphicon-search" id="navsearchbtn" runat="server" OnClick="navSearch" type="submit" />
                    </div>
                </div>
...
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
    </div>
    <div class="footer">
        <p>&copy; @DateTime.Now.Year - CLAP</p>
    </div>


    @RenderSection("scripts", required: false)
</body>
</html>

Итак, с этим кодом, он показывает мне всплывающее меню вв левом верхнем углу браузера, вместо моего текстового поля, и вместо Resultat отображается ResId.

Что я делаю не так и как это исправить?Я хочу, чтобы пользователь выбрал метку, но вернул идентификатор.

Ответы [ 2 ]

0 голосов
/ 04 июля 2019

Так что технически вам нужно сделать это для каждого ключа Введите текстовое поле например

H из "Hamza" вы берете это 'H' из TextBox, делаете Ajax-вызов и создаете функцию в контроллере, которая возвращает JSON результат, запрашивая базу данных, используя SQL как запрос, который при использовании C # мы можем использовать LINQ 

var nameSuggestion = customers.Where(c => c.Name.Contains("H")).tolist();

Таким образом, этот метод будет возвращать результат JSON, и затем вы можете автоматически заполнять свой ListBox с предложениями, используя JQUERY или JAVASCRIPT , поэтому вы продолжаете печатать для каждой базы данных Key-Down будет запрошен, и вы получите измененное предложение рядом, когда вы вставите буквы по одному ЧАС M Z Вот как я это сделал в своем проекте, и он работал отлично.

0 голосов
/ 04 июля 2019

Почему бы не добавить список данных со всеми желаемыми параметрами? Таким образом, при поиске будут показаны все возможные варианты в зависимости от текущего содержимого. 

<input list="MyDataList"/>
<datalist id="MyDataList">
   <option>option1</option>
   <option>option2</option>
   <option>option3</option>
</datalist>

Предлагаю вам <div> с идентификатором. Затем вы используете ajax для вызова PartialView (с помощью ActionResult-Method), который создает элемент <datalist> со всеми опциями. Затем в ajax-result-function вы можете заполнить div следующим образом: 

$("#IdOfTheDiv").html(result);


Или, наоборот, Мейби: http://easyautocomplete.com/ (не пробовал)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...