我需要有關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