2014-02-25 48 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;「但仍然,你的過濾方法看起來確實超出標準檢查的文檔來了解過濾是如何工作的。