We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to use parameter in data source

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



5 Replies

AP Arun Palaniyandi Syncfusion Team September 13, 2017 12:17 PM UTC

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:  

 
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.     



CJ Carlos Junior September 14, 2017 03:47 AM UTC

Ok Arun!

Thank you very much!

Regards,
Junior



AP Arun Palaniyandi Syncfusion Team September 15, 2017 10:04 AM UTC

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_ S_Line April 10, 2019 04:54 PM UTC

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


PO Prince Oliver Syncfusion Team April 11, 2019 09:29 AM UTC

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 

For further reference, please refer to the following documentation 

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 


Loader.
Live Chat Icon For mobile
Up arrow icon