Ihr habt in einer blanken Applikation ein Dropdown-Feld definiert und möchtet nun wie in einem Fromular das Dropdown mit einem Suchfeld ausstatten.
Select2() ist ein jQuery Plugin das in Scriptcase zwar schon geladen wird, wir können es aber nicht einfach benutzen, wie z.B. bei TCPDF oder Thickbox.
Es muss extra eingebunden werden. Das geht mit folgenden Code.
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
Das bindet die nötigen Bibliotheken ein.
Dann kommt euer Dropdown (hier nur ein Beispiel)
<select class="js-example-basic-single" name="state">
<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
</select>
und in der Document ready function kommt dann die Zuweisung zur Bibliothek
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
Das ganze sieht dann am Ende so vollständig so aus.
?>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<select class="js-example-basic-single" name="state">
<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
</select>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
<?php
