I have a selectize input and want to change its behaviour. I normally use selectize inputs from within some framework (shiny), so I hope the example that I give here is understandable and precise.
I want to change the logic, when an onChange - event is triggered. I only want this to happen when there is one element selected, not when none is selected. In case the user deletes the element and leaves the form untouched, I want to restore the value that was active before.
Have a look at the following code:
$(document).ready(function() {
var selectize = $('#select-beast').selectize({
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input,
text: input
}
}
});
selectize[0].selectize.on('change', function() {
var value = selectize[0].selectize.getValue();
console.log(value);
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectize Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.default.min.css">
</head>
<body>
<select id="select-beast" multiple placeholder="Select a beast...">
<option value="lion">Lion</option>
<option value="tiger">Tiger</option>
<option value="bear">Bear</option>
<option value="elephant">Elephant</option>
<option value="rhino">Rhino</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
</body>
</html>So in my case the log message should only ever print out something like Array["bear"] but never an empty array. I know that in this case one could do a if before the console.log but I am explicitly asking for changing the onChange condition because in my real problem I have no direct control on what my framework is doing. Is there a way of achieving my goal?
- no change-event with empty selection
- restoring the value that was there before, once the user gives focus to another element
I would claim that it is pretty natural to want something like that, so maybe there is even a plugin capable of achieving my goals?