2014-02-25 112 views
1

我有一个过滤HTML选择选项女巫基于html输入的问题。例如: 如果我在输入写的T恤我只想看到T恤衫在我的选择选项 我的代码看起来像这样...筛选选择基于html输入与jquery和javascript

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

请准确指定您的代码是否是失败还是什么输出你得到 – DevelopmentIsMyPassion

+0

我没有得到任何影响...当我输入一些东西时没有什么变化 –

+1

'$(this).data('options')'=>我没有看到'data-options' attri bute任何地方。 – Elfentech

回答

0

我正确答案是这样的一个

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

}); 

    }); 
2

您是否检查过jquery.filter文档? (http://api.jquery.com/filter/)正如@Elfentech所指出的,你指的是不存在的东西(选项)。

我推荐你用“style =”display:none;“使所有选项都不可见,并且当你进行过滤时,给过滤后的选项设置一个”display:block;“但仍然,你的过滤方法看起来确实超出标准检查的文档来了解过滤是如何工作的。