show item request form when an unknown item is selected in select2
Question
I would like to use select2 to show a company search. If the company the user is looking for is not in the current dataset we need to show a company request form to add the data.
html
<head>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
</head>
<body>
<select class="js-example-basic-single" name="company">
<option value="1">(FB) Facebook</option>
<option value="2">(AAPL) Apple</option>
<option value="3">(NFLX) Netflix</option>
<option value="4">(GOOG) Alphabet</option>
</select>
<form style="margin: 100px 0 0 0; display: none">
<h2>
Company not found
</h2>
<button>
Add Company?
</button>
</form>
</body>
javascript
/**
* Requrirements:
* 1) indicate in dropdown that the user will be adding the company. Maybe by displaying "Add: GOOG"
* 2) unhide company request form when a new company is selected.
*/
$(document).ready(function() {
let elm = $('.js-example-basic-single');
elm.select2({
placeholder: "Company",
tags: true,
createTag: function(params) {
console.log('createTag', params);
return {
id: params.term,
text: params.term.toUpperCase()
}
},
insertTag: function(data, tag) {
tag.isTag = true;
data.push(tag);
},
}).on("change:select", function(e) {
console.log('select');
var data = e.params.data;
var requestForm = document.querySelector('form');
if (data.isTag) {
console.log('local tag selected', data);
requestForm.style.display = 'block';
} else {
requestForm.style.display = 'none';
}
});
});
jsfiddle at https://jsfiddle.net/morenoh149/mf6Lxyc0/21/ any help appreciated
1 answers
solution1
1 ACCPTED 2020-11-07 00:36:19
You are using change:select but that is not a select2 event . The closest event to that is change.select2 but that is not what you want. The event you want is select2:select , which occurs whenever a result is selected.
Given your existing code, you've already set isTag to true so the rest of your code works as you expect:
}).on("select2:select", function(e) {
console.log('select');
var data = e.params.data;
var requestForm = document.querySelector('form');
if (data.isTag) {
console.log('local tag selected', data);
requestForm.style.display = 'block';
} else {
requestForm.style.display = 'none';
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.