javascript - 搜索过滤html选择选项时jquery功能不起作用

Question

我结合了stackoverflow代码来制作一些代码，其中可以使用输入文本框过滤html选择选项。现在，我可以过滤选项，但是当我单击该选项时，jquery 无法正常工作。单击选项时我有设置警报。如果没有过滤我们点击的选项然后弹出警报，但是如果我们过滤选项然后警报不起作用。请帮助我，我正在提供代码。请不要复制它，除非给出一个工作代码。请！！！

<input type="text">
<select id="peaks" name="cars" size="5" style='border: 2px solid green;'>
 <option>Copper</option>
 <option>Silver</option>
 <option>Gold</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

jQuery.fn.filterByText = function(textbox) {
  return this.each(function() {
    var select = this;
    var options = [];
    $(select).find('option').each(function() {
      options.push({
        value: $(this).val(),
        text: $(this).text()
      });
    });
    $(select).data('options', options);

    $(textbox).bind('change keyup', function() {
      var options = $(select).empty().data('options');
      var search = $.trim($(this).val());
      var regex = new RegExp(search, "gi");

      $.each(options, function(i) {
        var option = options[i];
        if (option.text.match(regex) !== null) {
          $(select).append(
            $('<option>').text(option.text).val(option.value)
          );
        }
      });
    });
  });
};

$(function() {
  $('select').filterByText($('input'));
});

$('#peaks option:contains("Copper")').click(function(){
 alert('copper')
});
$('#peaks option:contains("Silver")').click(function(){
 alert('silver')
});
$('#peaks option:contains("Gold")').click(function(){
 alert('gold')
});

});
</script>

标签： javascriptjquery