I have combined stackoverflow codes to made some code, in which html select option can be filtered by using a input textbox. Now, I am able to filter the options but when I am clicking on the option then jquery not working. I have setup alert when click on option. If without filtering the options we click then alert popup, But if we filter the options then alert don't work. Please help me, I am giving the code. Please don't duplicate it unless giving a working code. Please!!!
<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>