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

Question

I am a beginner in asp.net and I'm trying to add a search bar with autocompletion. 我是asp.net的初学者，我正在尝试添加具有自动补全功能的搜索栏。

I want the result to return a list of object, result of a stored procedure on two tables with more than 200.000 rows each (top 30 result for the autocompletion), with 2 fields : a label (Resultat) and an Id (IdRes). 我希望结果返回一个对象列表，即两个表上的存储过程的结果，每个表都超过200.000行（自动完成的前30个结果），并带有2个字段：标签（Resultat）和Id（IdRes）。

I managed to call my function, I get my result, but the autocomplete popup does not show or in a wrong way. 我设法调用了函数，得到了结果，但是自动完成弹出窗口没有显示或显示错误。

Here is the code of my _layout.cshtml : 这是我的_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>

So, with this code, It shows me a popup menu in the left top corner of the browser, instead of under my textbox and it displays the ResId instead of Resultat. 因此，使用此代码，它在浏览器的左上角显示了一个弹出菜单，而不是在我的文本框下方，并且显示了ResId而不是Resultat。

What am I doing wrong and how can I fix it ? 我在做什么错，我该如何解决？ I want the user to select a label but return the Id. 我希望用户选择标签，但返回ID。

Answer 1

Why not add a datalist, with all the desired options? 为什么不添加具有所有所需选项的数据列表？ That way if you search, it will show all the possible options, depending on the current content. 这样，如果您进行搜索，它将显示所有可能的选项，具体取决于当前内容。

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

I suggest you have a <div> with an ID. 我建议您有一个带有ID的<div> 。 Then you use ajax to call a PartialView (by ActionResult-Method) which creates the <datalist> element with all the options. 然后，使用ajax调用PartialView（通过ActionResult-Method），该PartialView使用所有选项创建<datalist>元素。 Then in the ajax-result-function you can populate the div like this: 然后，在ajax-result-function中，您可以像这样填充div ：

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

Or alternatively maby use this: http://easyautocomplete.com/ (Haven't tried it) 或者，maby也可以使用以下方法： http : //easyautocomplete.com/ （尚未尝试）

Answer 2

So technically you need to do is for Every Key Enter in textbox for example 因此，从技术上讲，您需要做的是例如在文本框中输入“每个键”

H of "Hamza" you take this 'H' from TextBox and make an Ajax call and make a function in controller to return JSON result by querying the database using SQL like query which when using C# we can use LINQ H的“ Hamza”，您可以从TextBox中获取此“ H”并进行Ajax调用，并在控制器中创建一个函数以通过使用SQL之类的查询SQL查询数据库来返回JSON结果，当使用C＃时，我们可以使用LINQ

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

So this Method will return the JSON result and you can then AutoFill Your ListBox with suggestions using JQUERY or JAVASCRIPT ,So you Keep on typing for every Key-Down Data-Base will be queried and you will get the changed suggestion side by side when you put in the letters one by one HAMZA This is how i did in my project and it worked perfectly. 因此，此方法将返回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