How to use parameter in data source

[Carlos Junior]

Hi!
I have the following autocomplete in view:

@Html.EJ().Autocomplete("selectCar").Datasource(dataSource => dataSource.URL(Url.Action("DataSource", "Autocomplete")).Adaptor(AdaptorType.UrlAdaptor)).Query("ej.Query()").AutocompleteFields(af => af.Text("text")).Width("300").FilterType(FilterOperatorType.Contains)


In the controller I have the following method:

public JsonResult DataSource()
{
     IEnumerable Data = setListSource();
     return Json(Data, JsonRequestBehavior.AllowGet);
}

But I would like to use the parameterized controller method as follows:

public JsonResult DataSource(int categoryId)
{
     IEnumerable Data = setListSource(categoryId);
     return Json(Data, JsonRequestBehavior.AllowGet);

}


How do I configure the view autocomplete datasource with the controller parameter?

Regards,
Junior

[Arun Palaniyandi]

Hi  Carlos Junior, 

Thanks for contacting Syncfusion support.   

You can achieve this requirement by binding the change event for Autocomplete and don’t bind any datasource for the Autocomplete initially. Then in the Autocomplete change event handler using AJAX call pass the entered value to the controller and then do the server side filtering using the sent value. On AJAX success get the JSON data and update the private variable for suggestion list and call _doneRemaining private method the popup will be populated with server data. Hence this will avoid loading all the data source at initial and will load data only when searched and also shows the data with our filtered values.  Please refer the code below 

View: 

 

  @Html.EJ().Autocomplete("selectCar").Query("ej.Query()").ClientSideEvents(ce => ce.Change("onchange")).AutocompleteFields(af => af.Text("text")).Width("300").FilterType(FilterOperatorType.Contains) 

 

 

<script> 

    function onchange(e) { 

        searchTerm = $('#selectCar').val(); 

        $.ajax({ 

            type: 'POST', 

            url: '@Url.Action("DataSource", "Autocomplete")', 

            data: { 

                categoryId: parseInt(searchTerm) 

            }, 

            success: function (response) { 

                var ac = $("#selectCar").ejAutocomplete("instance"); 

                if (response != null && response.length) { 

                    ac.suggestionListItems = response; 

                    ac._doneRemaining(); 

                } else 

                    ac._hideResult(); 

            } 

        }); 

    } 

 

</script> 

 

 

Controller: 

 

        public JsonResult DataSource(int categoryId) 

        { 

 

            if (categoryId == null) 

            { 

                return null; 

            } 

            else 

            { 

                IEnumerable Data = setListSource(); 

 

 

                // Filtering based on the searched word i.e int category can be used to filter here 

 

 

 

                return Json(Data, JsonRequestBehavior.AllowGet); 

 

            } 

        } 

Please refer to the following sample:  

https://www.syncfusion.com/downloads/support/forum/132620/ze/AutocompleteMVC_(2)-1627849743 

 

Please check the shared sample and if the sample still not meet your requirement, please send us more information so that we will provide a solution.         

         

Regards,         

Arun P.     

[Carlos Junior]

Ok Arun!

Thank you very much!

Regards,
Junior

[Arun Palaniyandi]

Hi Carlos Junior, 

 

We are glad that our solution has resolved your issue. 

 

Please let us know if you have any queries in future. 

 

Regards, 

Arun P. 

[S_Line]

Hello, how can i do this in Essential JS 2 (Javascript ES5)?

thank you.

[Prince Oliver]

Hello S_Line, 

Good day to you. 

To receive the text that typed on input, in the server side, you can use our DataManager. We have provided support in DataManager to send the search text from client and receive it in the server side. We have attached an example application for your reference, please find it in the following location 

Sample Link: https://www.syncfusion.com/downloads/support/forum/132620/ze/MVCsampleEJ21568491611 

For further reference, please refer to the following documentation 

UG link: https://ej2.syncfusion.com/aspnetcore/documentation/auto-complete/data-binding/#bind-to-url-adaptor  

Code Snippet for reference 

[Client Side] 

<div class="control"> 

    <div class="control-section"> 

        <div class="col-lg-3 content-wrapper"> 

            <label>AutoComplete</label> 

            <iput id="autocomplete" type="text" /> 

        </div> 

    </div> 

</div> 

<script> 

    var atcObj1 = new ej.dropdowns.AutoComplete({ 

        // bind the DataManager instance to dataSource property 

        dataSource: new ej.data.DataManager({ url: '/Home/UrlDatasource', adaptor: new ej.data.UrlAdaptor(), crossDomain: true }), 

        // set the placeholder to AutoComplete input element 

        placeholder: 'Select customer', 

        // set the filterType to searching operation 

        filterType: 'StartsWith', 

    }); 

    atcObj1.appendTo('#autocomplete'); 

</script> 

[Server side] 

public object UrlDatasource(Data dm) 

{ 

    var val = OrdersDetails.GetAllRecords(); 

    var Data = val.ToList(); 

    var count = val.Count(); 

    if (dm.where != null) 

    { 

        Data = (from cust in Data 

                where cust.ToLower().StartsWith(dm.@where[0].value.ToString()) 

                select cust).ToList(); 

    } 

    if (dm.take != 0) 

        Data = Data.Take(dm.take).ToList(); 

    return Json(Data); 

} 

Screenshot for reference 

 

Let us know if you need any further assistance on this. 

Regards, 

Prince