diff --git a/README.md b/README.md
index e854f49..257766d 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ This project was created when we needed a **drop-in replacement** for x-editable
- **Bootstrap 5** compatibility
- **jQuery** support maintained
- **Select dropdowns** - fully functional
+- **Select2 support** - advanced select with search/ajax
- **Date pickers** - using bootstrap-datepicker
- **Drop-in replacement** - minimal code changes needed
- **Streamlined codebase** - Bootstrap 5 only, legacy code removed
@@ -28,6 +29,7 @@ php -S 0.0.0.0:8000
The demo showcases:
- Select inputs with AJAX and static data sources
+- Select2 inputs with search functionality (requires select2 library)
- Date picker functionality
- Basic in-place editing
@@ -40,10 +42,10 @@ npm install x-editable-bootstrap5
### Dependencies
-This library requires:
+This library automatically installs and requires:
- **Bootstrap 5** (CSS and JS)
- **jQuery 3.x**
-- **bootstrap-datepicker** (for date inputs)
+- **bootstrap-datepicker** (for date inputs - included as dependency)
### Quick Start
@@ -56,6 +58,9 @@ This library requires:
+
+
+
@@ -65,6 +70,17 @@ This library requires:
```
+**Or using npm/webpack:**
+```javascript
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min.js';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+import 'bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css';
+import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js';
+import 'x-editable-bootstrap5/dist/bootstrap5-editable/css/bootstrap-editable.css';
+import 'x-editable-bootstrap5/dist/bootstrap5-editable/js/bootstrap-editable.js';
+```
+
2. **Initialize editable elements:**
```javascript
$('#my-editable').editable({
@@ -77,14 +93,69 @@ $('#my-editable').editable({
});
```
+## Select2 Support
+
+This library includes built-in support for Select2 inputs, providing enhanced select functionality with search, AJAX loading, and more.
+
+**Note:** You need to include the Select2 library separately, as it's not bundled with x-editable.
+
+### Quick Select2 Setup
+
+1. **Include Select2 library:**
+```html
+
+
+
+
+```
+
+2. **Use select2 type in your editable:**
+```javascript
+$('#my-select2').editable({
+ type: 'select2',
+ source: [
+ {id: 'us', text: 'United States'},
+ {id: 'gb', text: 'Great Britain'},
+ {id: 'de', text: 'Germany'}
+ ],
+ select2: {
+ placeholder: 'Select Country',
+ allowClear: true
+ },
+ url: '/update-endpoint'
+});
+```
+
+### Select2 with AJAX
+
+```javascript
+$('#ajax-select2').editable({
+ type: 'select2',
+ select2: {
+ placeholder: 'Search countries...',
+ minimumInputLength: 2,
+ ajax: {
+ url: '/search-countries',
+ dataType: 'json',
+ data: function (term) {
+ return { query: term };
+ },
+ results: function (data) {
+ return { results: data };
+ }
+ }
+ },
+ url: '/update-endpoint'
+});
+```
+
## Migration from Bootstrap 3
If you're migrating from the original x-editable:
1. **Update Bootstrap** to version 5
-2. **Add bootstrap-datepicker** dependency (no longer bundled)
-3. **Replace x-editable files** with this Bootstrap 5 version
-4. **Update CSS classes** if using custom styling (Bootstrap 3 → 5 changes)
+2. **Replace x-editable files** with this Bootstrap 5 version (bootstrap-datepicker included as dependency)
+3. **Update CSS classes** if using custom styling (Bootstrap 3 → 5 changes)
The JavaScript API remains largely the same, making it a true drop-in replacement.
diff --git a/demo/demo.js b/demo/demo.js
index dd19b82..23b4acd 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -70,4 +70,30 @@ $(function() {
}
});
+ // Note: This would require select2 library to be loaded
+ // $('#select2-test').editable({
+ // type: 'select2',
+ // url: 'demo/demo.php',
+ // source: [
+ // {id: 'us', text: 'United States'},
+ // {id: 'gb', text: 'Great Britain'},
+ // {id: 'ru', text: 'Russia'},
+ // {id: 'de', text: 'Germany'},
+ // {id: 'fr', text: 'France'},
+ // {id: 'es', text: 'Spain'},
+ // {id: 'it', text: 'Italy'}
+ // ],
+ // value: 'us',
+ // select2: {
+ // placeholder: 'Select Country',
+ // allowClear: true
+ // },
+ // success: function(response, newValue) {
+ // console.log('Select2 success:', newValue);
+ // },
+ // error: function(response) {
+ // console.log('Select2 error:', response);
+ // }
+ // });
+
})
diff --git a/demo/index.html b/demo/index.html
index e0a7def..43fa576 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -63,6 +63,22 @@
+
+
Test X-Editable Select2
+
Click to select from a larger list with search (Note: Requires select2 library):
+
+
+ Click to select country
+
+