Autocomplete Textbox from database MVC 5 - javascript

I have my textboxfor field which select the data from role table from the database
i need this textboxfor field make a autocomplete with starting character.
Sample:
MVC code:
This JsonResult in the UsersControl
public JsonResult GetRoles(string Prefix)
{
var RoleListVal = db.Roles.Where(r => r.Deleted == false)
.Where(r => r.Name.ToUpper().StartsWith(Prefix))
.Select(r => new { Name = r.Name, ID = r.RoleID }).Distinct().ToList();
return Json(RoleListVal, JsonRequestBehavior.AllowGet);
}
cshtml Code:
This the JS and the HTML5 TextBoxFor:
$("#keywords-manual").autocomplete({
source: "/Users/GetRoles",
minLength: 1
})
<div class="form-inline">
#Html.Label("Role :")
#Html.TextBoxFor(model => model.Roles.FirstOrDefault().Name, new { #class = "form-control", #id = "keywords-manual" })
</div>
I don't why isn't working!

Here your controller side method looks good.
But issue is while you calling method.
$("#keywords-manual").autocomplete({
source: function (request, response) {
$.ajax(
{
type: "POST",
url: '#Url.Action("GetRoles","Users")',
data: { Prefix: $('#keywords-manual').val() },
dataType: "json",
success: function (data) {
response($.map(data, function (item) {
return {
value: item.Name,
description: item
}
}))
},
error: function (error) {
console.log(error);
}
});
},
minLength: 1,
select: function (event, ui) {
}
});

This is how you configure the Autocomplete plug in
On HTML Side:
$(function () {
$("#keywords-manual").autocomplete({
source: "#Url.Action("GetRoles","Users")",
minLength: 1
})
});
On the controller side:
public JsonResult GetRoles(string term)
{
var RoleListVal = db.Roles.Where(r => r.Deleted == false)
.Where(r => r.Name.ToUpper().StartsWith(term))
.Select(r => new { label = r.Name, id = r.RoleID,value=r.RoleID }).Distinct().ToList();
return Json(RoleListVal, JsonRequestBehavior.AllowGet);
}

Related

Select section showing undefined in ajax autocomplete

I getting name perfectly but I am not getting their name related ID in ajax autocomplete
Following is the view code,
#Html.TextBoxFor(model => Model.CustomerFullName, new { #class = "form-control" })
#Html.TextAreaFor(model => Model.CustomerId)
$(document).ready(function () {
$("#CustomerFullName").autocomplete({
source: function (request, response) {
$.ajax({
url: '#Url.Action("AutoComplete", "Order")',
datatype: "json",
data: {
term: request.term
},
success: function (data) {
response($.map(data, function (val) {
return {
value: val.Name,
label: val.Name
}
}))
}
})
},
select: function (event, ui) {
alert(ui.item.id);
$("#CustomerId").val(ui.item.id);
}
});
});
Here is the controller,
public JsonResult AutoComplete(string term = "")
{
var objCustomerlist = (from customer in _customerRepository.Table
where customer.Username.StartsWith(term)
select new
{
Name = customer.Username,
ID = customer.Id
}).ToList();
return Json(objCustomerlist);
}
In autocomplete ajax select section alert showing undefined
I tried things to solve like
JSON.Stringfy(ui.item.id)
ui.id
but still didnt work.

Uncaught Error in autocomplete select item

I am getting autocomplete item list from javascript autocomplete but when I select that autocomplete item list at that time it shows the error i.e. Uncaught TypeError: n.item is undefined
Here is my code,
<div class="form-group">
<div class="col-md-3">
<nop-label asp-for="Name" />
</div>
<div class="col-md-9">
#Html.TextBoxFor(model => Model.Name, new { #class = "form-control" })
#Html.HiddenFor(model => Model.Name)
</div>
</div>
$(document).ready(function () {
$("#Name").autocomplete({
source: function (request, response) {
$.ajax({
url: '#Url.Action("AutoComplete", "Product")',
datatype: "json",
data: {
term: request.term
},
success: function (data) {
response($.map(data, function (val) {
return {
label: val.Name,
value: val.Name
}
}))
}
})
},
select: function (ui) {
$("#Name").val(ui.item.Name);
}
});
});
Here is the controller
public JsonResult AutoComplete(string term = "")
{
var objCustomerlist = (from product in _productMasterRepository.Table
where product.Name.StartsWith(term)
select new
{
Name = product.Name,
ID = product.Name
}).ToList();
return Json(objCustomerlist);
}
Your select signature is incorrect:
select: function (ui) {
$("#Name").val(ui.item.Name);
}
Change it into:
select: function (event, ui) {
$("#Name").val(ui.item.Name);
}
And that should work fine.

asp.net mvc 4 - linq Contains operator is working as if it were a StartsWith operator

controller:
[HttpPost]
public JsonResult Index(string search)
{
var data = LoadExplore_SP("sp_View_Explore");
List<ExploreModel> stuff = new List<ExploreModel>();
foreach (var row in data)
{
stuff.Add(new ExploreModel
{
Thing_Title = row.Thing_Title
});
}
//Searching records from list using LINQ query
var ThingList = (from N in stuff
where N.Thing_Title.Contains(search)
select new { N.Thing_Title });
return Json(ThingList, JsonRequestBehavior.AllowGet);
}
view:
<script type="text/javascript">
$(document).ready(function () {
$("#Thing_Title").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Home/Index",
type: "POST",
dataType: "json",
data: { search: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.Thing_Title, value: item.Thing_Title };
}))
}
})
},
messages: {
noResults: "", results: ""
}
});
})
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
<div class="form-group">
<div class="col-md-12">
#Html.EditorFor(model => model.Thing_Title, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
</div>
}
My problem is that I can't get the linq where clause to work the way it should. Instead of returning results like %search%, it is returning all records like 'search%' instead.
Do you know why it's behaving this way?

Autocomplete does not appear in view, ASP.NET MVC

I have one field in my view, it is a textbox field. But I'd like to change that field to an Autocomplete dropdown.
Below is my view:
#Html.TextBoxFor(model => model.SearchFilterPaymentCode, new { #class = "form-control", #id = "searchInput1" })
#Html.HiddenFor(model => model.ID)
<script>
$(document).ready(function () {
$("#searchInput1").autocomplete({
source: function (request, response) {
$.ajax({
url: '#Url.Action("getJenisPembayaran", "Payment1")',
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response($.map(data, function (val, item) {
return {
label: val.Name,
value: val.Name,
ID: val.ID
}
}))
}
})
},
select: function (event, ui) {
$("#ID").val(ui.item.ID);
$("#SearchFilterPaymentCode").val(ui.item.label);
}
});
})
</script>
and below is my controller
public JsonResult getJenisPembayaran(string term)
{
var objCustomerlist = db.ParamJenisPembayarans.Where(x => x.Name.ToUpper()
.Contains(term.ToUpper()))
.Select(x => new ParamJenisPembayaranViewModel
{
ID = x.ID,
JenisPembayaran = x.Name
}).Distinct().ToList();
return Json(objCustomerlist, JsonRequestBehavior.AllowGet);
}
When I debug the controller and fill the textbox with a few words, I get some data from the database, that means the controller is working well but the data does not appear in the view. What's wrong with my code?

jQuery autocomplete not working with JSON

I am trying to implement the jQuery autocomplete. I feel like everything is set up just fine, however It's not working.
SearchSkies method
public JsonResult SearchSkies(string query)
{
SkiDao skiDao = new SkiDao();
IList<Ski> skies = skiDao.SearchSkies(query);
List<string> brands = (from Ski s in skies select s.Brand).ToList();
return Json(brands, JsonRequestBehavior.AllowGet);
}
The script in View
<script type="text/javascript">
$( function() {
$( "#searchBox" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: '#Url.Action("SearchSkies","Skies")',
dataType: "json",
data: {
query: request.term
},
success: function (data) {
response(data);
}
} );
},
minLength: 2,
});
});
</script>
You are not mentioning type of request(GET/POST) in ajax call.
$(document).ready(function () {
$("#searchBox").autocomplete({
source: function(request,response) {
$.ajax({
url: "/Skies/SearchSkies",
type: "POST", <<----
dataType: "json",
data: { query: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.Name, value: item.Name };
}))
}
})
},
messages: {
noResults: "", results: ""
}
});
})
And the controller
public class SkiesController : Controller
{
// GET: Home
[HttpGet]
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult SearchSkies(string query)
{
SkiDao skiDao = new SkiDao();
IList<Ski> skies = skiDao.SearchSkies(query);
List<string> brands = (from Ski s in skies select s.Brand).ToList();
return Json(brands, JsonRequestBehavior.AllowGet);
}
}

Categories