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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • remoteAutoComplete with MVC 5 #78639

    GregoryHouseMD
    Participant

    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>

    remoteAutoComplete with MVC 5 #78646

    GregoryHouseMD
    Participant

    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 🙂

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.