AJAX Select

Link the library:

You will have to include the following line before the end of <body> element in order to use ajax-select on any of your web page(s):

                  <script src="https://cdn.jsdelivr.net/gh/thepoetdj/ajax-select/ajax-select.min.js"></script>

Basic usage:

Once you have included the library, you can use this webcomponent on any of your existing select elements or in new ones, based on the use case. All you have to do is set the is attribute of a select element as follows:
```
                  <select is="ajax-select" name="countries" ajax-url="https://cdn.jsdelivr.net/gh/thepoetdj/ajax-select@db/countries.json"></select>
                
```
You would have noticed that in the example above there is an unknown attribute used inside the select element. ajax-url is a mandatory attribute when using this webcomponent. This is where you will specify a RESTful service url. By default, ajax-select will try to read the text and value keys from JSON response of the webservice, which will then be used as text and value of an option element, respectively.
Read custom keys:

What if your service url returns a response that does not contain either text or value or both of the keys? In such cases, you can use the ajax-fields attribute which will tell this webcomponent which of the reponse fields to read and use in an option element.
```
                  <select is="ajax-select" name="countries" ajax-url="https://restcountries.eu/rest/v2/all?fields=name;nativeName" ajax-fields="name,nativeName"></select>
                
```
The ajax-fields attribute accepts values in this format: textKey,valueKey. Both the textKey and valueKey specifies which key from service response should be used as text and value in the option element, respectively.

In the example above, we read the name and nativeName fields from mentioned REST url and use them in the generated option element, where the text of the element will be name of a Country (since we are using a countries webservice) and the value of the element will be the native name of that Country.
Callbacks:

There might be some cases where you want to manipulate the service response before populating the options. For those cases, you can use the ajax-callback attribute and provide the name of a custom JavaScript function which will manipulate and populate the options.
```
                  <select is="ajax-select" name="countries" ajax-url="https://restcountries.eu/rest/v2/all" ajax-callback="countrySelector"></select>

<script>
  function countrySelector(response) {
    response.forEach(element => this.addOption(element['name'], element['numericCode']));
  }
</script>
                
```
When using a custom callback function, there are two things you should remember:
1) It must be a single parameter function, as ajax-select will pass the response of the webservice to the callback function on invocation
2) You can use this variable, which will refer to the select element to which callback function is attached

Extras:

In Read custom keys section, we saw how to read and use custom fields. There is an attribute available called ajax-delimiter which—when used together with the ajax-fields attribute—allows you to specify your own custom field separator.

                  <select is="ajax-select" name="countries" ajax-url="https://restcountries.eu/rest/v2/all?fields=name;nativeName" ajax-fields="name|nativeName" ajax-delimiter="|"></select>

AJAX Select

How to use it?

Link the library:

Basic usage:

Read custom keys:

Callbacks:

Extras: