jQWidgets Forums
jQuery UI Widgets › Forums › Lists › ComboBox › remoteAutoComplete with MVC 5
This topic contains 1 reply, has 1 voice, and was last updated by GregoryHouseMD 9 years, 7 months ago.
-
Author
-
I read the ComboBox documentation and the DataAdapter documentation, but in the end I am doing something wrong.
I have a list of codes and descriptions and when the user starts to type in the code, I want to show the top 15 codes that match the search. I’m using MVC, and in the documentation I didn’t see anywhere what’s the name of the parameter that the url is called with ( eg: jQueryUI’s parameter name is term). This is how my controller looks like at the moment, returning all the results:
[RouteArea(“Api”)]
[RoutePrefix(“Codes”)]
public class CodesController : BaseController
{
private readonly ICodesContext _db = new AppDbContext();[Route(“GetCodes}”)]
public async Task<JsonResult> GetCodes() =>
return
Json(
await
_db.Codes.OrderBy(x => x.Code)
.Take(15)
.Select(x => new {x.Code, text = x.Code + ” – ” + x.Description})
.ToListAsync(), JsonRequestBehavior.AllowGet);
}I included the following scripts:
<script src=”/jqwidgets/jqxcore.js”></script>
<script src=”/jqwidgets/jqxdata.js”></script>
<script src=”/jqwidgets/jqxbuttons.js”></script>
<script src=”/jqwidgets/jqxscrollbar.js”></script>
<script src=”/jqwidgets/jqxlistbox.js”></script>
<script src=”/jqwidgets/jqxcombobox.js”></script>And this is how my javascript looks:
<script language=”javascript”>
$(document).ready(function () {
var source =
{
dataType: ‘json’,
dataFields: [
{ name: ‘Code’, type: ‘string’ },
{ name: ‘Text’, type: ‘string’ }
],
id: ‘Code’,
url: ‘/Api/Codes/GetCodes’
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#Codes”).jqxComboBox({
width: 250,
height: 25,
source: dataAdapter,
displayMember: ‘Text’,
valueMember: ‘Code’,
theme: ‘bootstrap’,
remoteAutoComplete: true,
remoteAutoCompleteDelay: 0,
showArrow: false,
search: function (searchString) {
dataAdapter.dataBind();
}
});
});
</script>I worked it out. The dataAdapter has to have this:
var dataAdapter = new $.jqx.dataAdapter(source, { formatData: function(data) { if ($("#Codes").jqxComboBox('searchString') != undefined) { data.code= $("#Codes").jqxComboBox('searchString'); return data; } } });
and now the data.code parameter will bind to the code parameter in the action declaration:
public async Task<JsonResult> GetCodes(string code)This should go in a Web API documentation somewhere
-
AuthorPosts
You must be logged in to reply to this topic.