Filter select options based on html input with Jquery and javascript

Question

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>

please specify exactly whether your code is failing or what output you are getting — DevelopmentIsMyPassion, Feb 25 '14 at 20:08
I don't get any effect... Nothing is changing when i input something — Valor_, Feb 25 '14 at 20:10
`$(this).data('options')` => I see no `data-options` attribute anywhere. — Elfentech, Feb 25 '14 at 20:10
You might check this: http://stackoverflow.com/questions/1447728/how-to-dynamic-filter-options-of-select-with-jquery — Elfentech, Feb 25 '14 at 20:13
If you want the filtering to happen on keyup, then remove the `$("#filtersimilar").change()` binding. That's saying do `var options = …` when the `filtersimilar` select element changes. But what I'm understanding is that you actually want the select element to filter when the text element changes. Also, you have `$('#select2').html(options);`, but I don't see any `select2` element in your code. — Patrick Q, Feb 25 '14 at 20:14
Also, the way you're trying to do it, once you've filtered your options, you can't get the full list back. If you really want to "roll your own" instead of using a filter plugin, you'll want to save the options to an object that you can reference. — Patrick Q, Feb 25 '14 at 20:24

score 2 · Answer 1 · answered Feb 25 '14 at 20:20

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.

score 0 · Accepted Answer · answered Mar 03 '14 at 16:07

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]));
      }
  });

});

  });

Filter select options based on html input with Jquery and javascript

2 Answers2