Question

我正在使用这个相对简单的JS程序：

http://www.barelyfitz.com/webdesign/articles/filterlist/

程序只是使用文本框过滤选择框。

但是，我想要jquery和HTML5数据属性，它与最初使用的方式不同。我给文本框过滤器一个数据属性：

<input id="filter_text" name="filter_text" data-filterable="myselect" 
       type="text" />

我使用以下jquery获取要过滤的选择框的名称，然后过滤选择框：

$(function() {
    $('input[data-filterable]').keyup(function() {
       select_box_name = $($(this).data('filterable'))[0];
       filter = new filterlist(select_box_name);
       filter.set(this.value);
    });
});

几乎可以工作。你可以过滤但是如果你按退格键去除过滤器那么没有任何反应，即它不会“不过滤”。

它必须是非常小的东西!!

谢谢你:)。

Answer 1

您需要在事件处理程序之外初始化过滤器：

$(function() {
    $("input['data-filterable']").each(function() {
        var filter = new filterlist($($(this).data('filterable'))[0]);
        $(this).keyup(function() {
            filter.set(this.value);
        );
    });
});

Answer 2

每keyup您重新初始化filter。因此，您只能在按下某个键时对select进行过滤。将过滤器的初始化移出keyup事件，它正在运行。 Here是个小提琴。

使用数据属性过滤选择框（使用第三方JS过滤代码）

2 个答案: