我需要有关ID和文本的文本框中自动补全的帮助

Question

我是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>

因此，使用此代码，它在浏览器的左上角显示了一个弹出菜单，而不是在我的文本框下方，并且显示了ResId而不是Resultat。

我在做什么错，我该如何解决？ 我希望用户选择标签，但返回ID。

Answer 1

为什么不添加具有所有所需选项的数据列表？ 这样，如果您进行搜索，它将显示所有可能的选项，具体取决于当前内容。

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

我建议您有一个带有ID的<div> 。 然后，使用ajax调用PartialView（通过ActionResult-Method），该PartialView使用所有选项创建<datalist>元素。 然后，在ajax-result-function中，您可以像这样填充div ：

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

或者，maby也可以使用以下方法： http : //easyautocomplete.com/ （尚未尝试）

Answer 2

因此，从技术上讲，您需要做的是例如在文本框中输入“每个键”

H的“ Hamza”，您可以从TextBox中获取此“ H”并进行Ajax调用，并在控制器中创建一个函数以通过使用SQL之类的查询SQL查询数据库来返回JSON结果，当使用C＃时，我们可以使用LINQ

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

因此，此方法将返回JSON结果，然后您可以使用JQUERY或JAVASCRIPT自动填充带有建议的建议的ListBox，因此您将继续为每个Key-Down数据库输入内容，当您进行查询时，将并排获得更改的建议HAMZA一张一张地写上字母这就是我在项目中所做的，而且效果很好。

我需要有关ID和文本的文本框中自动补全的帮助

问题描述

2 个解决方案

解决方案1
0 2019-07-04 07:22:30

解决方案2
0 2019-07-04 10:40:37

我需要有关ID和文本的文本框中自动补全的帮助

问题描述

2 个解决方案

解决方案1 0 2019-07-04 07:22:30

解决方案2 0 2019-07-04 10:40:37

解决方案1
0 2019-07-04 07:22:30

解决方案2
0 2019-07-04 10:40:37