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

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>
douduiwei2831
douduiwei2831 此外,您尝试这样做的方式,一旦您过滤了您的选项,您就无法获得完整的列表。如果您真的想“自己动手”而不是使用过滤器插件,则需要将选项保存到可以引用的对象中。
6 年多之前 回复
douyouchou1085
douyouchou1085 如果您希望在keyup上进行过滤,则删除$(“#filtersimilar”)。change()绑定。当过滤器相似的select元素发生变化时,这就是说varoptions=â€|。但我理解的是,您实际上希望select元素在文本元素更改时进行过滤。此外,你有$('#select2')。html(options);,但我没有在你的代码中看到任何select2元素。
6 年多之前 回复
dongya2578
dongya2578 您可以查看:stackoverflow.com/questions/1447728/...
6 年多之前 回复
dsqbh42082
dsqbh42082 $(this).data('options')=>我看不到任何数据选项属性。
6 年多之前 回复
dove2199
dove2199 我没有任何影响......当我输入内容时,什么都没有改变
6 年多之前 回复
douyue8191
douyue8191 请准确说明您的代码是否失败或您获得的输出
6 年多之前 回复

2个回答

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

});

  });



您检查过jquery.filter文档吗? ( http://api.jquery.com/filter/ )正如@Elfentech指出的那样,你的推荐 对于不存在的东西(选项)。</ p>

我建议您使用“style =”display:none;“使所有选项不可见,并且当您进行过滤时,给出过滤后的选项a “display:block;”。但是,你的过滤方法看起来真的不合标准。请查看文档以了解过滤的工作原理。</ p>
</ div>

展开原文

原文

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.

立即提问
相关内容推荐