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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Pass to remote server the word to search

Thread ID:

Created:

Updated:

Platform:

Replies:

143741 Apr 3,2019 01:42 PM UTC Apr 15,2019 05:45 AM UTC JavaScript - EJ 2 5
loading
Tags: AutoComplete
S_Line
Asked On April 3, 2019 01:42 PM UTC

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 [Syncfusion]
Replied On 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_Line
Replied On 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?

Prince Oliver [Syncfusion]
Replied On 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 


nick jonas
Replied On 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.

Prince Oliver [Syncfusion]
Replied On 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     


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon