我需要帮助在带有 id 和文本的文本框中自动完成答案

【问题标题】：I need help for autocompletion in a textbox with id and text我需要帮助在带有 id 和文本的文本框中自动完成
【发布时间】：2019-07-04 05:18:03
【问题描述】：

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

【问题讨论】：

标签： c# jquery asp.net ajax

【解决方案1】：

所以从技术上讲，您需要为 文本框 中的每个键输入例如

H of "Hamza" 你从 TextBox 中获取这个 'H' 并进行 Ajax 调用并在控制器中创建一个函数以通过使用查询数据库返回 JSON 结果在使用 C# 时，我们可以使用类似 SQL 的查询 LINQ

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

因此，此方法将返回 JSON 结果，然后您可以使用 JQUERY 或 JAVASCRIPT 自动填充您的列表框，因此您可以继续为每个 Key-Down 数据键入-Base会被查询，当你一个一个输入字母时，你会得到并排更改的建议 H 一种米 Z 一种这就是我在我的项目中所做的，并且效果很好。

【讨论】：

感谢您的回答，但我的问题不是如何获得结果，而是如何显示结果。我的查询有效，我得到了预期的结果，但弹出窗口显示在浏览器的左上角而不是在文本框下方，我向我显示的是 Id 而不是标签。

【解决方案2】：

为什么不添加一个包含所有所需选项的数据列表？这样，如果您搜索，它将根据当前内容显示所有可能的选项。

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

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

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

或者也可以使用这个：http://easyautocomplete.com/（没试过）

【讨论】：

我应该更具体一点，自动完成是 2 个表中每个超过 300.000 行的 sql 查询的结果。
@glaudioman 嗯，很多。但是您究竟想如何显示结果。因为如果您只想要第一场比赛，您可以将结果排队并选择前 100 场比赛。
我想根据文本框中的字符串显示前 15 个结果。现在，当文本更改时，它会使用文本框字符串作为参数触发我的方法。我的存储过程选择 .. where .. like %value% 并发送第 15 行（对于自动完成，完整列表用于结果页面）。
那么在这种情况下，您只需使用结果（您的前 15 行），并使用 JQuery 来更改页面。您可以使用 datalist 获得解决方案，并且每次更改文本框时，您都可以清除的内容并用新结果填充它。那个灵魂的工作。
我今晚试试这个，我告诉你它是否有效。谢谢！