[SELECT2] Kiểu dữ liệu trả về cho giao diện dùng html & json (ok)
https://select2.org/data-sources/formats
Grouped data
C:\xampp\htdocs\php\test.php
<html lang="en">
<head>
<title>jquery select2 ajax php example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<div class="container">
<form id="frm">
<h1>Solution 1</h1>
<div class="row">
<div class="col-4">
<div class="form-group">
<label for="tagInput">Get data by ajax calling</label>
<select class="form-control" id="pictures_tag_input">
<optgroup label="Alaskan/Hawaiian Time Zone" data-select2-id="select2-data-80-t2re">
<option value="AK" data-select2-id="select2-data-79-uk58">Alaska</option>
<option value="HI" data-select2-id="select2-data-81-ml8m">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone" data-select2-id="select2-data-82-7gzy">
<option value="CA" data-select2-id="select2-data-83-qa2i">California</option>
<option value="NV" data-select2-id="select2-data-84-itb5">Nevada</option>
<option value="OR" data-select2-id="select2-data-85-v82a">Oregon</option>
<option value="WA" data-select2-id="select2-data-86-4ai9">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone" data-select2-id="select2-data-87-2ce1">
<option value="AZ" data-select2-id="select2-data-88-3p9l">Arizona</option>
<option value="CO" data-select2-id="select2-data-89-prvj">Colorado</option>
<option value="ID" data-select2-id="select2-data-90-pe2x">Idaho</option>
<option value="MT" data-select2-id="select2-data-91-2976">Montana</option>
</optgroup>
</select>
<small class="form-text text-muted">
<p class="text-info">Infinite Scroll</p>
</small>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#pictures_tag_input").select2();
});
</script>
</body>
</html>C:\xampp\htdocs\php\test.php
<html lang="en">
<head>
<title>jquery select2 ajax php example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<div class="container">
<form id="frm">
<h1>Solution 1</h1>
<div class="row">
<div class="col-4">
<div class="form-group">
<label for="tagInput">Get data by ajax calling</label>
<select class="form-control" id="pictures_tag_input">
</select>
<small class="form-text text-muted">
<p class="text-info">Infinite Scroll</p>
</small>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#pictures_tag_input").select2({
placeholder: "Search for options",
ajax: {
url: "https://jsonplaceholder.typicode.com/posts",
dataType: "json",
minimumInputLength: 2,
data: function(params) {
return {};
},
processResults: function(data, params) {
var datx = getNestedChildren();
console.log(datx);
return {
results: datx
};
}
}
});
function getNestedChildren() {
var roots = [];
var objs = [{text: "User " + 1, children: [{ id: 'node.id 1', text: 'node.title 1' }]},{text: "User " + 2, children: [{ id: 'node.id 2', text: 'node.title 2' }]}];
objs.forEach(obj => {
roots.push(obj);
})
return roots;
};
});
</script>
</body>
</html>Last updated
