diff --git a/pages/06.data-sources/02.ajax/docs.md b/pages/06.data-sources/02.ajax/docs.md index 2dbcb690..d7512519 100644 --- a/pages/06.data-sources/02.ajax/docs.md +++ b/pages/06.data-sources/02.ajax/docs.md @@ -1,5 +1,7 @@ --- title: Ajax (remote data) +metadata: + description: Select2 provides extensive support for populating dropdown items from a remote data source. taxonomy: category: docs process: @@ -7,134 +9,49 @@ process: never_cache_twig: true --- -Select2 comes with AJAX support built in, using jQuery's AJAX methods. In this example, we can search for repositories using GitHub's API. +Select2 comes with AJAX support built in, using jQuery's AJAX methods. In this example, we can search for repositories using GitHub's API: - + -When using Select2 with remote data, the HTML required for the `select` is the same as any other Select2. If you need to provide default selections, you just need to include an `option` for each selection that contains the value and text that should be displayed. +**In your HTML:** ``` - + ``` -You can configure how Select2 searches for remote data using the `ajax` option: +**In your Javascript:** -

-
-
-
-Select2 will pass any options in the `ajax` object to jQuery's `$.ajax` function, or the `transport` function you specify.
-
->>> Select2 expects results from the remote endpoint to be filtered on the **server side**. If server-side filtering is not possible, you may be interested in using Select2's support for data arrays instead.
-
-## Rate-limiting requests
-
-You can tell Select2 to wait until the user has finished typing their search term before triggering the AJAX request.  Simply use the `ajax.delay` configuration option to tell Select2 how long to wait after a user has stopped typing before sending the request:
-
-```
-$('select').select2({
-  ajax: {
-    delay: 250 // wait 250 milliseconds before triggering the request
+    url: 'https://api.github.com/search/repositories',
+    dataType: 'json'
+    // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
   }
 });
 ```
 
-## Transforming response data
+You can configure how Select2 searches for remote data using the `ajax` option.  Select2 will pass any options in the `ajax` object to jQuery's `$.ajax` function, or the `transport` function you specify.
 
-You can use the `ajax.processResults` option to transform the data returned by your API into the format expected by Select2:
+>>> For **remote data sources only**, Select2 does not create a new `