Question

I have a javascript program to filter a list of things in a HTML select control by typing a regular expression into an input (text) box. I can do the following to correctly filter a specific select control:

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

but I have used a custom attribute (something one can now do in HTML5) called data-filterable. The attribute will store the name of the select control that is to be filtered so that JS can use the name of the control to filter the list. This would be a good idea because I will have a general function to filter any select box rather than a specific one.

Any ideas how I do this? I need something like this in the HTML:

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

but I’m not sure exactly what I’m doing here and what to do with the JS.

Thanks guys :).

Answer 1

Try this:

<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);
        });
});

To break down the expression $($(this).data('filterable'))[0]:

$(this) wraps this in a jQuery wrapper. In our context, since it’s a jQuery keyup event handler, this references the <input> DOM node.

$(this).data('filterable') retrieves the contents of the data-filterable attribute as a string. In our case, it’s #selectbox1.

After that this string gets passed in to jQuery as a selector: $($(this).data('filterable')).

Finally, we take the 0’th element of the returned array which should be the DOM element of the target selectbox. Of course, if there isn’t a selectbox which fits the selector this will fail rather miserably. If you suspect that this is a real scenario, check the .length of the returned array first.