Pass to remote server the word to search

[S_Line]

Hi, i want to use the autocomplete control, but, all of the examples show the "filter" in the client. I need to pass the typed word to the server and return the results.

How can i do that?

Thank you

[Vinoth Kumar Sundara Moorthy]

Hi S_Line, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your requirement for autocomplete component filtering with remote service. By default, autocomplete component will send request to serve based on the typed word (i.e. search text) and return the data. Please find the below code snippet and sample for your reference. 

 

HTML 

<div> 

    <h4>Server Filtering</h4> 

    <input type="text" id="products"> 

</div> 

 

 

TS 

let atcObj1: AutoComplete = new AutoComplete({ 

    // bind the DataManager instance to dataSource property 

    dataSource: new DataManager({ 

        url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees', 

        adaptor: new WebApiAdaptor, 

        crossDomain: true 

    }),  

    // bind the Query instance to query property 

    query: new Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(), 

    // map the appropriate columns to fields property 

    fields: { value: 'FirstName' }, 

    // set the placeholder to AutoComplete input element 

    placeholder: 'e.g. Andrew Fuller', 

    // sort the resulted items 

    sortOrder: 'Ascending',  

}); 

atcObj1.appendTo('#products'); 

 

 

Sample Link: https://stackblitz.com/edit/emldnp-3q2zuj?file=index.ts 

 

Demo Link: https://ej2.syncfusion.com/demos/#/material/auto-complete/data-binding.html 

 

Documentation link: https://ej2.syncfusion.com/documentation/auto-complete/data-binding/?no-cache=1#bind-to-remote-data 

 

Could you please check the above sample and get back to us with more information if we misunderstood your requirement or you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S 

[S_Line]

Thank you, but, when i implemented the server cannot receive the text i typed.

I need the server receive the text that i typed on input and return the results according the query on database.

how can i do this?

[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: http://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 

[nick jonas]

I want to run a javascript on https://uaetechnician.ae/samsung-service-centre  and also access the database using jquery. Please advise me of the proper resources.

[Prince Oliver]

Hello Nick, 

Thank you for contacting us. 

You can refer to the following UG and demo links for JavaScript to get started on binding remote data from the database.  

UG link: https://ej2.syncfusion.com/javascript/documentation/auto-complete/data-binding/?no-cache=1#bind-to-remote-data  

Demo link: https://ej2.syncfusion.com/javascript/demos/#/material/auto-complete/data-binding.html  

If the above suggestion does not meet your requirement. Please share clear details information on requirement. This will help us provide a prompt solution. 

Regards, 

Prince     

[Afaq Sadiq]

I want to run a javascript on the IT support networking page of https://home-maintenance-dubai.com/ and also access the database using jquery. Please advise me of the proper resources.

[Berly Christopher]

Hi Afaq,

We could see the shared link is not relation to Syncfusion, please get back to us if you need assistance in Syncfusion products.

Regards,

Berly B.C