The search feature in the dropdown select does not work (select 2 plugin)-CodePudding

I am trying to activate the search feature in the drop-down lists by using select 2 plugin, but unfortunately the plugin does not work at all

the select option working fine , but searching not work on it (select 2 plugin) html code: `

<div >
                    <table style="text-align:center;" id="dynamicAddRemove">
                      <tr style="background-color:#007398;color:white;text-align:center;">
                        <th >الحساب</th>
                        <th >مدين</th>
                        <th >دائن</th>
                        <th >وصف</th>
                        <th ></th>
                      </tr>
                      <tr>
                      <td >
                        <select  name="account[]"required>
                            <option value="1">--1--</option>
                            <option value="2">--2--</option>
                            <option value="3">--3--</option>
                            <option value="4">--4--</option>
                            <option value="5">--5--</option>
                            <option value="6">--6--</option>
                            </select>
                          </td>
                        <td ><input type="number" name="debtor[]" id="fname" onkeydown="return event.keyCode !== 69" required></td>
                        <td ><input type="number" name="creditor[]" id="james"  onkeydown="return event.keyCode !== 69" required></td>
                        <td ><input type="text"  name="description[]"   required></td>
                        <td> <input type="text" name="mount[]"    required> </td>
                        <td ><button type="button" name="add" id="add-btn" ><i ></i></button></td>
                      </tr>
                    </table>

Jquery code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script></script>
<script>
  $(document).ready(function() {
    $('.js-example-basic-single').select2();
});
</script>

CodePudding user response：

Looks like Jquery's library is the culprit;

See a working example here: https://jsfiddle.net/2g9u7snw/1/

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script></script>
<script>
  $(document).ready(function() {
    $('.js-example-basic-single').select2();
});
</script>

Add Jquery's library above select2.min.js and give it a try; the fiddle shows a working example of your code if you need.

CodePudding user response：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script></script>
<script>
  $(document).ready(function() {
    $('.js-example-basic-single').select2();
});
</script>