https://github.com/muhammedrahil/easy-custom-select2-search-module
A simple and customizable JavaScript utility for integrating the Select2 library with asynchronous search functionality. This script enhances Select2 dropdowns with custom search capabilities, making it easier to handle large datasets and paginate results from an API.
https://github.com/muhammedrahil/easy-custom-select2-search-module
dropdown dropdownselect javascript select2 selection
Last synced: 3 months ago
JSON representation
A simple and customizable JavaScript utility for integrating the Select2 library with asynchronous search functionality. This script enhances Select2 dropdowns with custom search capabilities, making it easier to handle large datasets and paginate results from an API.
- Host: GitHub
- URL: https://github.com/muhammedrahil/easy-custom-select2-search-module
- Owner: muhammedrahil
- Created: 2024-08-26T07:54:11.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-23T15:12:45.000Z (9 months ago)
- Last Synced: 2025-01-21T01:13:02.654Z (5 months ago)
- Topics: dropdown, dropdownselect, javascript, select2, selection
- Homepage:
- Size: 7.81 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Easy-Custom-select2-search
A simple and customizable JavaScript utility for integrating the Select2 library with asynchronous search functionality. This script enhances Select2 dropdowns with custom search capabilities, making it easier to handle large datasets and paginate results from an API.
## Features
- Customizable Search: Easily customize the search parameters for your Select2 dropdown.
- Asynchronous API Requests: Fetch options dynamically from an API as the user types.
- Pagination Support: Load more results on demand as the user scrolls through options.
- Event Handling: Custom event handlers for unselect, close, and more.
- Multiple Selections: Support for multiple selections in the dropdown.
- Placeholder Text: Customizable placeholder text for the dropdown.
### Installation
Include the necessary scripts in your HTML file:
```javascript
```
Add the `CustomSelect2Search` function to your script:
```javascript
function CustomSelect2Search({ url, elementID, multiple, placeholderText, dropdownParent, width, onUnselect, onClose, success, complete }) {
var initialUrl = url;
var nextPageUrl = initialUrl;
$('#' + elementID).select2({
dropdownParent: dropdownParent,
width: width,
ajax: {
url: function (params) {
let url = new URL(initialUrl, window.location.origin);
if (params.term) {
url.searchParams.set('search', params.term); // Set page to 1 for search
url.searchParams.set('page', params.page || "1"); // Set page to 1 for search
} else {
url.searchParams.set('page', params.page || "1")
}
nextPageUrl = url.toString();
return nextPageUrl;
},
dataType: "json",
delay: 250,
processResults: function (res) {
nextPageUrl = res.next_page_url ? res.next_page_url : initialUrl;
let dataArray = res.data ? res.data : [];
return {
results: dataArray.map(function (item) {
return {
id: item.id,
text: item.name,
};
}),
pagination: {
more: nextPageUrl !== initialUrl,
},
};
},
cache: true,
error: function (error) {
console.error("Error fetching data:", error);
},
data: function (params) {
// if (params.term) {
// return {
// search: params.term || "",
// };
// }
// return;
},
success: success,
complete: complete,
},
allowClear: true,
escapeMarkup: function (markup) {
return markup;
},
placeholder: placeholderText,
multiple: multiple,
initSelection: function (element, callback) {
callback([]);
},
close: function () {
nextPageUrl = initialUrl;
},
});
// Attach custom event handlers if provided
if (onUnselect) {
$('#' + elementID).on("select2:unselect", onUnselect);
}
if (onClose) {
$('#' + elementID).on("select2:close", onClose);
}
// Reset the nextPageUrl on close
$('#' + elementID).on("select2:close", function (e) {
nextPageUrl = initialUrl;
});
// $('#' + elementID).on('select2:opening', function (e) {
// $(this).data('select2').dropdown.$search.on('input', function () {
// });
// });
}
```
```javascript
function unselectItem(elementID) {
$('#' + elementID).val(null).trigger('change');
}
```
```javascript
function getSelectedText(elementID) {
var selectedOption = $('#' + elementID).select2('data');
if (selectedOption && selectedOption.length > 0) {
return selectedOption[0].text;
}
return null;
}
```
## Usage
To use the `CustomSelect2Search` function, simply call it with the necessary parameters:
```javascript
ustomSelect2Search({
url: 'your-api-url',
elementID: 'add-store-issue-packing-control',
multiple: true,
placeholderText: 'Select an option',
dropdownParent: '#your-dropdown-parent-element',
width: '100%',
onUnselect: function(e) {
// your code
},
onClose: function(e) {
// your code
}
success: function (data) {
console.log('API call successful with data:', data);
},
complete: function (jqXHR, textStatus) {
console.log('API call completed with status:', textStatus);
console.log('API call completed with status:', jqXHR);
// Additional code can go here if needed
},
});
```
### Example
Here’s an example of how you can integrate this script with your application:
```html
CustomSelect2Search({
url: 'https://api.example.com/search',
elementID: 'add-store-issue-packing-control',
multiple: true,
placeholderText: 'Search and select options',
dropdownParent: '#your-dropdown-parent-element',
width: '100%',
onUnselect: function(e) {
console.log('Item unselected:', e);
},
onClose: function(e) {
console.log('Dropdown closed:', e);
},
success: function (data) {
console.log('API call successful with data:', data);
},
complete: function (jqXHR, textStatus) {
console.log('API call completed with status:', textStatus);
},
});
```