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

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

或者maby使用以下命令：http://easyautocomplete.com/（还没有尝试过）

Answer 2

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

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

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

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

我需要在具有ID和文本的文本框中进行自动补全的帮助

2 个答案: