Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ASP.NET Core jquery Autocomplete returns blank lines in the list

I am using ASP.NET Core jquery Autocomplete with Boostrap 4 I have successfully run the following example from : https://jqueryui.com/autocomplete/

I am now looking to use data from my controller which returns data properly. The result that I get is blank lines.

enter image description here

Here is my Razor page

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
    <label>Autocomplete Example: </label>
    <input id="LastName" name="LastName" type="text" />
</div>
<script>
    $("#LastName").autocomplete({
        source: '@Url.Action("GetName","Home")'
    });
</script>

Here's my controller [HttpGet] public IActionResult GetName(string term) {

        List<TransactionName> list = new List<TransactionName>()
        {

            new TransactionName {Id=1,LastName="Linda" },
            new TransactionName {Id=2,LastName="Donna" },
            new TransactionName {Id=3,LastName="Maryanne" },
            new TransactionName {Id=4,LastName="Deb" },
            new TransactionName {Id=5,LastName="Liz" },
            new TransactionName {Id=6,LastName="Bobby" },
            new TransactionName {Id=7,LastName="Beth" }

    };
        var result = (from N in list
                        where N.LastName.Contains(term)
                        select new {N.LastName });
        return Json(result);
    }

enter image description here

like image 414
L. Piotrowski Avatar asked Jan 30 '18 16:01

L. Piotrowski


People also ask

How to use jQuery autocomplete with textbox?

The jQuery AutoComplete plugin has been applied to the TextBox and the URL ('/home/autocomplete') of the plugin is set to the AutoComplete Action method. We have also enclosed input textbox in HTML.BeginForm, which we are using to send value to controller, to check which value was selected.

How to create jQuery Ajax autocomplete application in Visual Studio 2019?

Open your visual studio 2019 and create a new Project of ASP.NET Core Web Application -> Give name to application jQuery AJAX AutoComplete -> Click Create -> From next Dialog box select ASP.Net Core Web App (Model-View-Controller) -> Select.NET Core and ASP.NET Core respective dropdowns located at top of the window -> click Create.

What is the return type of jsonresult in jQuery autocomplete?

When this method is accessed by the jQuery AutoComplete plugin, the records of the Customers Table of the Northwind database are fetched using the Entity Framework. Note: The following Handler method handles AJAX calls and hence the return type is set to JsonResult. The fetched records are then filtered and returned back to the View as JSON.

How to autocomplete vendorname textbox using jQuery Ajax?

Your VendorName textbox is ready with the AutoComplete feature triggered using jQuery AJAX call. Run your application and navigate to https://localhost:<port number>/vendor/VendorOrders . Enter atleast 3 characters in VendorName textbox it should display the following result..


1 Answers

I changed the following based on the jquery Autocomplete documentation:

    var result = (from N in list
                    where N.LastName.Contains(term)
                    select new {value=N.LastName });

Here's a portion of the documentation taken from their site. Multiple types supported: Array: An array can be used for local data. There are two supported formats: An array of strings: [ "Choice1", "Choice2" ] An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

like image 56
L. Piotrowski Avatar answered Jan 02 '23 22:01

L. Piotrowski