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

Question

我有一个javascript程序，可以通过在输入(文本)框中输入正则表达式来过滤HTML select控件中的内容列表。我可以执行以下操作来正确筛选特定的select控件：

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

但我使用了一个名为data-filterable的自定义属性(现在可以在HTML5中执行此操作)。该属性将存储要筛选的选择控件的名称，以便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);
        });
});

分解expression $($(this).data('filterable'))[0]

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

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

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

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