bagofmilk bagofmilk - 1 month ago 10
Javascript Question

jquery filter values according to specific character at specific position

I am trying to filter a table of part numbers according to a user-defined value at a specific position.

see jsFiddle --> http://jsfiddle.net/bagofmilk/wx9F3/12/

The problem is that I'm allowing multiple conditions - not just ONE character at ONE position.

If you take a look at the fiddle you will see I use Table Sorter 2.0 Plugin which works great. But I also created a small table above that with 7 textboxes. Each of these textboxes represents a value of a part number in the table below.

'data-log'
= if the textbox is null the value is 0, else the value will be 1.

'data-val'
= the character position in the part number string.


Example: If the user types "07" into item# 2, then the script will need to filter the table where the part number has a "0" at character position 2 in the string, and "7" at character position 3 in the string

Most filters will search the ENTIRE string for a "07", but I need this to be specific to its position.

I also need it so that when the user also types in "L" into item#7 that the script will filter the part numbers where "07" are at char positions 2,3 AND where "L" is at char position 11 in the string.

Here's the main function I'm trying to deal with:

$('.modx').keyup(function() {

//I emtpy the "values" array and "position" array
arrval = [];
arrpos = [];

//Whatever textbox the user types in must indicate there is a value
$(this).attr('data-log', '1');


//I create an array of user input values and their positions
$('.modx').each(function() {
if ($(this).attr('data-log') == 1) {
arrval.push($(this).val());
arrpos.push($(this).attr('data-val'));
} else {}
});

/* THIS IS WHERE IM STUCK...Using the "values" array and "position" array,
check each part number where all values and positions are true.
I CANNOT COME UP WITH THE LOGIC HERE... */

});


I might be approaching this completely the wrong way. If so, I'd love to hear any other methods, or if you can think of the logic I could apply at the end of this keyup function that would be awesome too.

enter image description here

Answer

It is a regex bases solution

Add an additional data-* attribute data-length to the second and 5th modx text fields as shown below

<input type='text' data-log='0' data-val='1' tabindex='2' placeholder='03' class='size2 modx' id='item2' data-length="2"/>
....
<input type='text' data-log='0' data-val='7' tabindex='6' placeholder='53'class='size2 modx' id='item6' data-length="2"/>

then

var $modxs = $('.modx').keyup(function () {
    var string = $modxs.map(function () {
        var value = $.trim(this.value),
            length = $(this).data('length') || 1;
        while (value.length < length) {
            value += '.';
        }
        return value;
    }).get().join('');
    string = string.replace(/(.{3})(.{5})(.{1})/, '$1-$2-$3');
    var regex = new RegExp(string, 'i');
    $('#partNumbers tbody tr').hide().filter(function () {
        return regex.test($.trim($(this).children().first().text()))
    }).show()
});
$('#clearBtn').click(function(){
    $modxs.val('');
    $('#partNumbers tbody tr').show()
})

Demo: Fiddle

Comments