The following topics will be discussed in this post.
- Interactive Running Demo
- Step 1: Setting up required CSS CDN files
- Step 2: Putting the required HTML in place
The dropdown list loads its data by Ajax from a REST API, then displays the returned data in the dropdown menu.
The Select2 dropdown will have the following features:
- Load an initial list of users returned from a REST API.
- Search through those users and display the filtered data.
- Allows multiple selections and displays the selected users.
Thanks to GO Rest for maintaining such an awesome live fake users API. No programming language experience is required to understand this example.
Interactive Running DemoYou will get a result similar to the below working demo. Feel free to try it and interact with it yourself.
Step 1: Setting up required CSS CDN files
In this example, only Bootstrap 4 and Select2 CSS libraries are required.
To set up the required CDN CSS files, put the following references in the HTML <head> tag of your page.
Bootstrap 4 CSS CDN on JSDelivr:
<link rel="stylesheet" href="https://email@example.com/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">Select2CSS CDN on JSDelivr:
<link rel="stylesheet" href="https://firstname.lastname@example.org/dist/css/select2.min.css"Now, we only need jQuery, Popper, Bootstrap 4 and Select2 JS libraries to run this example.
To set up the required CDN JS files, put the following reference at the bottom of your HTML tag of your page.
jQuery CDN JS file:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
Popper CDN JS file on JSDelivr:
<script src="https://email@example.com/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
Bootstrap 4 CDN JS file on JSDelivr:
<script src="https://firstname.lastname@example.org/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
Select2 CDN JS file on JSDelivr:
Step 2: Putting the required HTML in placeYour HTML code required to run this example should be as simple as the following:
<select id="UserList" name="UserList" multiple=""></select>
The “multiple” attribute is needed here to let Select2 know that this is going to be a dropdown list that allows multiple selection.
A GET request to that API will return a response in the following JSON format:
Now, at the bottom of your HTML tag, add a <script> tag as follows:
Notice the following important configurations:
- delay: This is a rate limit duration in milliseconds that will let the dropdown wait after the user finishes typing until the next Ajax request is sent.
- name: is used to pass whatever term the user types in the dropdown to search for users.
- page: is used to pass the next page number to the API as long as the user is scrolling through the items in the dropdown list and the API has more data to return.
- more: used to tell the dropdown if there are more items left in the API to return or not.
RecapIn this example, we could easily build a fully functioning Ajax Select2 dropdown list with CDN CSS and JS files.
We also attached a fully working HTML page in the next attachments section that you can download, run, and see the code for yourself.
If you have any questions, or feedback, feel free to leave me a comment in the comments section and I will answer as soon as possible.