locked
How to Make AutoComplete TextBox using jquery ajax with web api and show top 5 values while searching RRS feed

  • Question

  • Hi, I am at learning phase of web api and i want to autocomplete textbox using jquery ajax by hiting the web api.

    Here is the Controller where i hit the api 

      public JsonResult TestSearchList(string q, string pageLimit, string page)
            {
                    Dictionary<string, string> param = new Dictionary<string, string>();
                    param.Add("q", q);
                    param.Add("pageLimit", pageLimit);
                    param.Add("page", page);
                    var api = Common.ReadFromAPI<API>("https://localhost:44391//api/Test/TestList", "Get", param);
                    var results1 = JsonConvert.SerializeObject(api.Response["Response"]);
                    var results = JsonConvert.DeserializeObject<TestSearch>(results1);
                    var k = results.TestsList.Select(x => new { text = x.TestName, id = x.TestID }).ToList();
                    return Json(new { TotalItems = results.TotalItems, List = k });
            }

    Here is the Html

                                    <input class="form-control input-lg searchtests" placeholder="Type Test Name...." style="border-color:red"; />

    Here is Ajax

            $("#searchtests").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("SearchTest","Web")',
                            data: "{ 'st': '" + request.term + "' }",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            type: "POST",
                            success: function (resp) {
                                console.log(resp);
                                response($.map(resp, function (item)
                                {
                                    return { label: item.TestName, value: item.TestName, ID: item.TestID };
                                }))

                            },
                            error: function (response) {
                                alert(response.responseText);
                            },
                            failure: function (response) {
                                alert(response.responseText);
                            }
                        });
                    },
                    html: true,
                    select: function (e, i) {
                        alert("Test"+ i.item.value); 
                        var testid = $("#searchtests").val(i.item.value);
                       
                    }
                    


    • Edited by DotNet_Student_ Tuesday, March 27, 2018 4:31 AM
    • Moved by Fei Hu Tuesday, March 27, 2018 7:20 AM Asp.Net related
    Monday, March 26, 2018 2:14 PM

Answers

  • You dont need to do something special for it. Its very simple. In the following line of your code:

    var k = results.TestsList.Select(x => new { text = x.TestName, id = x.TestID }).ToList();
    

    Just take the 5 results as following:

                    var k = results.TestsList.Select(x => new { text = x.TestName, id = x.TestID }).ToList().Take(5);
    

    If my answer helped you please do vote and mark it as answer.

    Monday, March 26, 2018 5:33 PM

All replies

  • You dont need to do something special for it. Its very simple. In the following line of your code:

    var k = results.TestsList.Select(x => new { text = x.TestName, id = x.TestID }).ToList();
    

    Just take the 5 results as following:

                    var k = results.TestsList.Select(x => new { text = x.TestName, id = x.TestID }).ToList().Take(5);
    

    If my answer helped you please do vote and mark it as answer.

    Monday, March 26, 2018 5:33 PM
  • Hi DotNet_Student,

    According to your question is more related to ASP.NET, you could repost a new thread to Asp.Net forum for better support.

    If you have some grammar or code errors in using C#, please feel free to contact us. We will try our best to give you a solution.

    Best Regards,

    Neil Hu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, March 27, 2018 5:56 AM