Articles in this section
Category / Section

How can I use JS auto-complete with the OData services?

6 mins read

The JavaScript AutoComplete is a development environment designed to simplify and shorten the business applications and data services. The LightSwitch makes it easy to create business applications that can consume a variety of DataSources and create clients that can run on a variety of devices.         

Render Autocomplete/Dropdown List with the OData Services:

You can render the Autocomplete and Dropdown List controls with the OData Services.

The steps to render Autocomplete and Dropdown controls with the OData Services in the LightSwitch HTML Application are:

  1. In the Solution Explorer, choose the Data Source node in the Server Project.
  2. Right Click the Data Source Node and Select the Add Data Source. The Attach Data Source Wizard appears.
  3. In the Attach Data Source Wizard, choose the OData Service, and then click Next.
  4. On the Enter Connection Information page in the OData Source Address box, enter a URL.
  5. Under Login Information, choose None, and then choose the Next button. Note that the correct setting depends upon the implementation of the service you specified in the previous step.
  6. On the Choose your Entities page, select the entities and then click the Finish button.

he DataSource is added to the project under the DataSources folder and the entities are created. Now, you can create the Autocomplete and DropDown controls with those entities by following the steps mentioned in the following online help document link:

https://help.syncfusion.com/lightswitch/html-client/lightswitch-for-html-client

 

Another option is to use the Custom Control option to render the Autocomplete and Dropdown list controls. Use this code example to render the Autocomplete and Dropdown list controls with the Custom Control option.  Paste this code inside the Custom Control render method to render the respective controls.

DropDown List:

myapp.CustomDropDown.ScreenContent_render = function (element, contentItem) {

    // Write code here.

var input = $('<input />');

    input.attr('id', 'Customers');

    input.attr('data-role', 'none');

    input.appendTo($(element));

    if (input.hasClass('e-dropdownlist')) { input.ejDropDownList('destroy'); }

    var dataManger = ej.DataManager({

        url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"

    });

    // Query creation.

    var query = ej.Query()

           .from("Customers").take(6);

        input.ejDropDownList({

            dataSource: dataManger,

            fields: { text: "CustomerID" },

            query: query,

     });

};

Autocomplete:

myapp.CustomAutoComplete.ScreenContent_render = function (element, contentItem) {

    // Write code here.

    var input = $('<input />');

    input.attr('id', 'Employees');

    input.attr('data-role', 'none');

    input.appendTo($(element));

    if (input.hasClass('e-autocomplete')) { input.ejAutocomplete('destroy'); }

    var dataManger = ej.DataManager({

        url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"

    });

    // Query creation.

    var query = ej.Query()

           .from("Customers").take(6);

       input.ejAutocomplete({

             dataSource: dataManger,

             fields: { text: "CustomerID" },

             query: query,

            });

};

 

Syncfusion has prepared a sample for Autocomplete and Dropdown List controls with the OData Services and Custom control options. You can download it from the following location: Sample location



Conclusion

I hope you enjoyed on how to use auto-complete and DropDown controls with the OData services.

You can refer to our JavaScript Autocomplete feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to present and manipulate data.

For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our JavaScript Pivot Table and other JavaScript components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!


Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied