使用 Jquery 和 javascript 根据 html 输入过滤选择选项答案

【问题标题】：Filter select options based on html input with Jquery and javascript使用 Jquery 和 javascript 根据 html 输入过滤选择选项
【发布时间】：2014-02-25 20:05:27
【问题描述】：

我在过滤基于 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>

【问题讨论】：

请准确说明您的代码是否失败或您得到什么输出
我没有任何效果...当我输入内容时没有任何变化
$(this).data('options') => 我在任何地方都看不到 data-options 属性。
你可以检查这个：stackoverflow.com/questions/1447728/…
如果您希望在 keyup 上进行过滤，请删除 $("#filtersimilar").change() 绑定。这就是说当filtersimilar 选择元素改变时做var options = …。但我的理解是，您实际上希望选择元素在文本元素更改时进行过滤。另外，您有 $('#select2').html(options);，但我在您的代码中没有看到任何 select2 元素。

标签： javascript php jquery html

【解决方案1】：

您检查过 jquery.filter 文档吗？ (http://api.jquery.com/filter/) 正如@Elfentech 所指出的，您指的是不存在的东西（选项）。

我建议您使用“style="display:none;" 使所有选项不可见，并在进行过滤时为过滤后的选项提供“display:block;”。但是，您的过滤方法看起来确实不标准. 查看文档以了解过滤的工作原理。

【讨论】：

【解决方案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]));
      }
  });

});

  });

【讨论】：