Feature proposal: Operators (such as "and" / "or") between tags, for multiple options select
sorin.po...@gmail.com
I have a very strange (but hopefully interesting) idea about a new possible feature of select2 (it could be implemented as a plugin of select2, or even as a standard feature): The possibility to configure select2 to display "operators" between tags, like this:
```html
<select class="js-example-multiple-operator" multiple="multiple" data-multiselect-operator="and">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
<script type="text/javascript">
$(".js-example-multiple-operator").select2();
</script>
```
(see attached select2-example-and-operator.png)
or like this:
```html
<select class="js-example-multiple-operator" multiple="multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
<script type="text/javascript">
$(".js-example-multiple-operator").select2({
multiselectOperator: "or"
});
</script>
```
(see attached select2-example-or-operator.png)
And an extra-feature related to this: The triggering of an event when an operator is clicked:
"select2:operator" is fired whenever an operator is clicked.
This will allow a select2 user (that is, a web developer) to implement search-forms which offer the feature for the end-user to change the search-operator, by doing something like this:
```javascript
var $mySelect = $(".js-example-multiple-operator");
// Simple search:
$mySelect.on("select2:operator", function (e) {
toggleSearchOperator($mySelect);
});
// Advanced search:
var $mySelect = $(".js-example-multiple-operator");
$mySelect.on("select2:operator", function (e) {
cycleSearchOperator($mySelect, ['and', 'or', 'xor']);
});
function toggleSearchOperator(multiSelectJqueryObject) {
cycleSearchOperator(multiSelectJqueryObject, ['and', 'or']);
}
function cycleSearchOperator(multiSelectJqueryObject, searchOperatorsArray) {
var currentOperator = multiSelectJqueryObject.data('multiselect-operator');
var nextOperator = cycleValues(currentOperator, searchOperatorsArray);
multiSelectJqueryObject.data('multiselect-operator', nextOperator);
multiSelectJqueryObject.select2({ multiselectOperator: nextOperator });
}
function cycleValues(currentValue, valuesArray) {
var currentValueIndex = valuesArray.indexOf(currentValue);
var nextValueIndex = (currentValueIndex + 1) % valuesArray.length;
var nextValue = valuesArray[nextValueIndex];
return nextValue;
}
```
And maybe even an extra (third) feature to simplify the cycleSearchOperator like this:
```javascript
function cycleSearchOperator(multiSelectJqueryObject, searchOperatorsArray) {
var currentOperator = multiSelectJqueryObject.multiselectOperator();
var nextOperator = cycleValues(currentOperator, searchOperatorsArray);
multiSelectJqueryObject.multiselectOperator(nextOperator);
}
```
where of course the Select2 method multiselectOperator will internally perform something like this:
```javascript
"multiselectOperator": function(op) {
if (!!op) {
// Set the multiselect operator
multiSelectJqueryObject.data('multiselect-operator', op);
multiSelectJqueryObject.select2({ multiselectOperator: op });
} else {
// Get the multiselect operator
return multiSelectJqueryObject.data('multiselect-operator');
}
}
```
And the web developer would be able to send the search-form to the server like this:
```javascript
$('#submitSearchBtn').click(function() {
$searchCountries = $('#searchCountries').select2();
$.ajax({
url: "search.php",
data: {
searchCountries: $searchCountries.val(),
searchOperator: $searchCountries.multiselectOperator()
}
})
.done(function( results ) {
// Do something with the search results
});
});
```
What do you think about this idea?
Can I add it in the https://github.com/select2/select2/issues/new ?
