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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Searching existing api using autocomplete

Thread ID:

Created:

Updated:

Platform:

Replies:

124804 Jun 30,2016 07:10 PM UTC Jul 4,2016 09:28 AM UTC JavaScript 1
loading
Tags: ejAutoCompleteTextBox
Mike Rosenberger
Asked On June 30, 2016 07:10 PM UTC

I have an api end point that returns search results, the format the i send the search term to the server is in url ( "api/search/{term}" ).  Is there a way to implement this into the autocomplete and use the returned values to populate the autocomplete.

Narayanasamy Panneer Selvam [Syncfusion]
Replied On July 4, 2016 09:28 AM UTC

Hi Mike Rosenberger,   
    
Thanks for Contacting Syncfusion support.   
    
We can bind the JSON data returned from any web API services to our Autocomplete control. We have here prepared a sample using AJAX post method that call the web API and returns the JSON data. Define an AutoComplete control and in its change event call AJAX post to the web API, on its success event get the JSON data and bind it to AutoComplete’s suggestion list using the private method _doneRemaining().    
Please refer the below code example:   
    
  $('#autocomplete').ejAutocomplete({   
                change: "showCurrentSearch",   
                fields: { text: "Name", key: "id" }   
             
            })   
            function showCurrentSearch(args) {   
               if (args.value != "")    
                    $.ajax({   
                        type: "POST",   
                        url: "http://localhost:60885/RestServiceImpl.svc/" + args.value,   
                        data: '{searchletter: "' + args.value + '" }',   
                        contentType: "application/json; charset=utf-8",   
                        crossdomain: true,   
                        dataType: "json",   
                        success: OnSuccess,   
                        failure: function (response) {   
                            alert(response); }   
                    })   
                }   
                   function OnSuccess(response) {   
                    var data = $("#autocomplete").ejAutocomplete("instance");   
                   if (response.length>0)   
                    data.suggestionListItems = JSON.parse(JSON.stringify(response));   
                    data._doneRemaining();    
                }   
                           }   
    
Regards,   
Narayanasamy P. 


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.

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

;