How to use Select2 with JSON via Ajax request?
Stefan Izdrail
Founder & Senior Architect · 2026-06-29
Title: How to Use Select2 with JSON via Ajax Request - An In-Depth Guide for Developers
Introduction:
Select2 is an amazing jQuery plugin that allows you to create easily searchable and selectable dropdowns using JavaScript, HTML, and CSS. It's especially useful when working with dynamic content, such as data loaded through API calls or JSON responses from web apps. In this article, we will discuss how to use Select2 with JSON data retrieved via an Ajax request for a smooth user experience.
Prerequisites:
1. Understand the basics of HTML, CSS, and JavaScript.
2. Familiarity with Laravel framework (optional).
3. Basic knowledge of API development using PHP/Laravel.
4. Basic understanding of jQuery libraries, such as Select2.
5. A basic grasp of Ajax concepts would help in understanding the code.
6. Knowledge about JSON data structures and manipulation.
Getting Started:
Before we dive deep into the code, let's consider the following requirements:
- An HTML input element with a class name "itemSearch".
- A jQuery Select2 instantiation for this input.
- A Laravel API route returning JSON data based on user input.
Configuring Select2:
Firstly, include the Select2 script and style sheet links in your HTML document's head section. Remember to use the latest stable version (available at https://cdnjs.com/libraries/Select2).
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
$(".itemSearch").select2({
// Placeholder text when no values are selected in the dropdown
placeholder: "Select an Item",
// Minimum number of characters that must be entered before making a request
minimumInputLength: 2,
// Ajax configuration for retrieving data from your Laravel API
ajax: {
url: "/api/productSearch",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return {
option: term
};
},
results: function (data, page) {
var more = (page * 10) < data.total;
return {
results: data.itemName,
more: more
};
}
},
// Format the result string for display in dropdown
formatResult: function (data, term) {
return data;
},
// Format the selection string when an item is selected
formatSelection: function (data) {
return data;
},
// Customize the CSS class of the dropdown
dropdownCssClass: "bigdrop",
// Modify the HTML markup for escaped characters in text nodes
escapeMarkup: function (m) {
return m;
}
});