带搜索选项的 Select 框

Question

i have a select dropdown. i need a search in my options. i use select2 dropdown on it but the select not showing the search and the design is completely changed.

Here is my code:

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<select class="single" name="icons" onchange="TypeCheck(this);">
    <option value="0">Pick an icon ...</option>
    <option value="1">glass</option>
    <option value="2">door</option>
    <option value="3">Furniture</option>
</select>

function matchCustom(params, data) {
    if ($.trim(params.term) === '') {
      return data;
    }
    if (typeof data.text === 'undefined') {
      return null;
    }
    if (data.text.indexOf(params.term) > -1) {
      var modifiedData = $.extend({}, data, true);
      modifiedData.text += ' (matched)';
      return modifiedData;
    }
    return null;
}
 $(document).ready(function() {
        $('.single').select2({
            placeholder: "Select Country",
            allowClear: true,
            matcher: matchCustom
        });
    });

Answer 1

You can use select2 default search option rather you want to implement your own search block of code.

<select class="yourClassName" name="states[]" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

and you can use select2 default jquery code

$(document).ready(function() {
    $('.yourClassName').select2();
});

you can visit this link for more details https://select2.org/getting-started/basic-usage