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

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< /code> 在 jQuery 包装器中。在我们的上下文中，由于它是 jQuery keyup 事件处理程序，因此 this 引用 DOM 节点。

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

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

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