使用jQuery和javascript根據html輸入過濾選擇選項

Question

我在過濾HTML選擇選項時遇到了問題，它們是基於html的輸入。 例如：如果我在輸入中寫了T恤，我只想在我的選擇選項中看到T恤。我的代碼如下所示...

<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>

而JS / Jquery的代碼是：

<script>
function filter(){
    inp = $('#inputdata').val();
    $("#filtersimilar").change(function() { 
        var options = $(this).data('options').filter('[itemid=' + inp + ']');
        $('#select2').html(options);
    });
}
</script>

Answer 1

您是否查看過jquery.filter文檔？ （ http://api.jquery.com/filter/ ）正如@Elfentech指出的那樣，您指的是不存在的東西（選項）。

我建議您使用“ style =” display：none;“使所有選項均不可見，並且在進行過濾時，為過濾后的選項提供一個” display：block;“。但是，您的過濾器方法看起來確實不符合標准。文檔以了解過濾的工作原理。

Answer 2

對我來說正確的答案是這個

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

});

  });