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.

Searching existing api using autocomplete

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 05:28 AM

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.

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.

;