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

Pass to remote server the word to search

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

7 Replies

VK Vinoth Kumar Sundara Moorthy Syncfusion Team April 4, 2019 06:35 AM UTC

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'); 
 
 
 
 
 
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_ S_Line April 10, 2019 11:52 AM UTC

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?


PO Prince Oliver Syncfusion Team April 11, 2019 09:10 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 



NJ nick jonas April 13, 2019 10:11 AM UTC

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.


PO Prince Oliver Syncfusion Team April 15, 2019 05:45 AM UTC

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.  


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     



AS Afaq Sadiq July 31, 2021 10:57 AM UTC

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.



BC Berly Christopher Syncfusion Team August 2, 2021 10:10 AM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon