I'm having a problem with filtering HTML select options witch are based html input. For example: If i write t-shirt in my input i want to see only T-shirts in my select options My code looks like this...
<input type="text" name="search" id="inputdata" onkeyup="filter()">
<select name="select[]" id="filtersimilar" multiple>
<?php foreach ($all as $row) { ?>
<option value="<?php echo $row->id_product; ?>" itemid="<?php echo $row->name; ?>"><?php echo $row->name; ?></option>
<?php } ?>
</select>
And JS / Jquery code is:
<script>
function filter(){
inp = $('#inputdata').val();
$("#filtersimilar").change(function() {
var options = $(this).data('options').filter('[itemid=' + inp + ']');
$('#select2').html(options);
});
}
</script>
Right answer for me was this one
$(function() {
var opts = $('#filtersimilar option').map(function(){
return [[this.value, $(this).text()]];
});
$('#inputdata').keyup(function(){
var rxp = new RegExp($('#inputdata').val(), 'i');
var optlist = $('#filtersimilar').empty();
opts.each(function(){
if (rxp.test(this[1])) {
optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
}
});
});
});
Have you checked jquery.filter documentation? (http://api.jquery.com/filter/) As @Elfentech pointed out, your referring to something that does not exist (options).
I recommend you make all options invisible with "style="display:none;", and when you do the filtering give the filtered options a "display:block;". But still, your filter method looks really out of standard. Check the documentation to understand how filtering works.