Question

我有一个javascript程序，通过在输入（文本）框中键入正则表达式来过滤HTML选择控件中的事物列表。我可以执行以下操作以正确过滤特定的选择控件：

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

但是我使用了一个名为data-filterable的自定义属性（现在可以在HTML5中执行）。该属性将存储要过滤的select控件的名称，以便JS可以使用控件的名称来过滤列表。这将是一个好主意，因为我将有一个通用功能来过滤任何选择框而不是特定的选择框。

我是怎么做到这一点的？我在HTML中需要这样的东西：

<input data-filterable='{"to":"#selectbox1"}' size="30" type="text" />

但我不确定我在这里做什么以及如何处理JS。

谢谢你们:)。

Answer 1

试试这个：

<input data-filterable="#selectbox1" size="30" type="text" />

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

细分表达式$($(this).data('filterable'))[0]：

$(this)将this包装在jQuery包装器中。在我们的上下文中，由于它是一个jQuery keyup事件处理程序，this引用了<input> DOM节点。

$(this).data('filterable')以字符串形式检索data-filterable属性的内容。在我们的例子中，它是#selectbox1。

之后，此字符串作为选择器传递给jQuery：$($(this).data('filterable'))。

最后，我们获取返回数组的第0个元素，该元素应该是目标选择框的DOM元素。当然，如果没有一个适合选择器的选择框，那么它将失败相当悲惨。如果您怀疑这是一个真实场景，请首先检查返回数组的.length。

引用当前使用的HTML选择控件

1 个答案: