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.
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);
}
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.
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.
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.
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..
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" }, ... ]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With