jquerylistjs
Ignoring HTML content when searching a table with ListJS
I'm using ListJS 1.5.0 to paginate and filter records based on the user's input in the search input. It works fine, except for one small detail: The match is not ignoring the html portions of the contents. For example, the first item has this content inside the name cell:
Shirt Antman
<br><span class="badge badge-secondary">8237191</span>
If type Antman in the search box, it filters the table with the only record that has that content in the name cell (that's fine). But if type class it also finds that record, and of course all the other records, that have an html tag with a classname. I need a way to ignore html tags when filtering the records. I've looked into the List API options, properties and methods without success.
JavaScript
var list_options = {
valueNames: ['id','name','cat','price','views','photos','flg_featured','flg_public'],
pagination: true,
page: 20
};
var list = new List('list', list_options);
list.on('searchComplete', function(){
if(list.searched) {
console.log('Visible items: ' + list.visibleItems.length);
}
});
HTML
<div id="list">
<p><strong>Search</strong><br>
<input type="search" id="search" class="search form-control form-control-lg" value="" maxlength="50">
</p>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col" class="sort asc" data-sort="name">Product</th>
<th scope="col" class="sort d-none d-sm-table-cell" data-sort="cat">Category</th>
<th scope="col" class="sort money" data-sort="price">Precio</th>
<th scope="col" class="sort number d-none d-sm-table-cell" data-sort="views">Views</th>
<th scope="col" class="sort number d-none d-sm-table-cell" data-sort="photos">Photos</th>
<th scope="col" class="boolean">Featured</th>
<th scope="col" class="boolean">Active</th>
<th scope="col" class="action"> </th>
<th scope="col" class="action"> </th>
<th scope="col" class="action"> </th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="id d-none">50</td>
<td class="name">Shirt Antman
<br><span class="badge badge-secondary">8237191</span>
</td>
<td class="cat d-none d-sm-table-cell">Ropa <i class="icon icon-chevron-right"></i> Shirts</td>
<td class="price money">12.00</td>
<td class="views number d-none d-sm-table-cell">0</td>
<td class="photos number d-none d-sm-table-cell">0</td>
<td class="boolean"><i class="icon icon-times text-muted"></i>
</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="action"><a href="products.edit.php?id=50" data-toggle="tooltip" title="Editar"><i class="icon icon-pencil"></i></a>
</td>
<td class="action"><a href="products.view.php?id=50" data-toggle="tooltip" title="Ver item"><i class="icon icon-file"></i></a>
</td>
<td class="action"><a href="#" data-action="delete" data-id="50" data-row="773cbb4725991e7dc4625c305a830987" data-toggle="tooltip" title="Eliminar"><i class="icon icon-times-circle"></i></a>
</td>
</tr>
<tr class="table-warning">
<td class="id d-none">62</td>
<td class="name">Shirt Ariel
<br><span class="badge badge-secondary">8833191</span>
</td>
<td class="cat d-none d-sm-table-cell">Ropa <i class="icon icon-chevron-right"></i> Shirts</td>
<td class="price money">58.00</td>
<td class="views number d-none d-sm-table-cell">0</td>
<td class="photos number d-none d-sm-table-cell">0</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="action"><a href="products.edit.php?id=62" data-toggle="tooltip" title="Editar"><i class="icon icon-pencil"></i></a>
</td>
<td class="action"><a href="products.view.php?id=62" data-toggle="tooltip" title="Ver item"><i class="icon icon-file"></i></a>
</td>
<td class="action"><a href="#" data-action="delete" data-id="62" data-row="8243df426471beb65c61a7640a140da6" data-toggle="tooltip" title="Eliminar"><i class="icon icon-times-circle"></i></a>
</td>
</tr>
<tr>
<td class="id d-none">53</td>
<td class="name">Shirt Banshee
<br><span class="badge badge-secondary">8537191</span>
</td>
<td class="cat d-none d-sm-table-cell">Ropa <i class="icon icon-chevron-right"></i> Shirts</td>
<td class="price money">15.00</td>
<td class="views number d-none d-sm-table-cell">0</td>
<td class="photos number d-none d-sm-table-cell">0</td>
<td class="boolean"><i class="icon icon-times text-muted"></i>
</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="action"><a href="products.edit.php?id=53" data-toggle="tooltip" title="Editar"><i class="icon icon-pencil"></i></a>
</td>
<td class="action"><a href="products.view.php?id=53" data-toggle="tooltip" title="Ver item"><i class="icon icon-file"></i></a>
</td>
<td class="action"><a href="#" data-action="delete" data-id="53" data-row="a4fc66273597eece770cfe359b249695" data-toggle="tooltip" title="Eliminar"><i class="icon icon-times-circle"></i></a>
</td>
</tr>
<tr>
<td class="id d-none">48</td>
<td class="name">Shirt Batman
<br><span class="badge badge-secondary">9837191</span>
</td>
<td class="cat d-none d-sm-table-cell">Ropa</td>
<td class="price money">18.00</td>
<td class="views number d-none d-sm-table-cell">0</td>
<td class="photos number d-none d-sm-table-cell">0</td>
<td class="boolean"><i class="icon icon-times text-muted"></i>
</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="action"><a href="products.edit.php?id=48" data-toggle="tooltip" title="Editar"><i class="icon icon-pencil"></i></a>
</td>
<td class="action"><a href="products.view.php?id=48" data-toggle="tooltip" title="Ver item"><i class="icon icon-file"></i></a>
</td>
<td class="action"><a href="#" data-action="delete" data-id="48" data-row="9cc355b7453b437409ce3292592b37eb" data-toggle="tooltip" title="Eliminar"><i class="icon icon-times-circle"></i></a>
</td>
</tr>
<tr>
<td class="id d-none">63</td>
<td class="name">Shirt Cable
<br><span class="badge badge-secondary">8834191</span>
</td>
<td class="cat d-none d-sm-table-cell">--</td>
<td class="price money">59.00</td>
<td class="views number d-none d-sm-table-cell">0</td>
<td class="photos number d-none d-sm-table-cell">0</td>
<td class="boolean"><i class="icon icon-times text-muted"></i>
</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="action"><a href="products.edit.php?id=63" data-toggle="tooltip" title="Editar"><i class="icon icon-pencil"></i></a>
</td>
<td class="action"><a href="products.view.php?id=63" data-toggle="tooltip" title="Ver item"><i class="icon icon-file"></i></a>
</td>
<td class="action"><a href="#" data-action="delete" data-id="63" data-row="7c32a52158abe9d6ed711133bb3e728b" data-toggle="tooltip" title="Eliminar"><i class="icon icon-times-circle"></i></a>
</td>
</tr>
<tr>
<td class="id d-none">39</td>
<td class="name">Shirt Capitan América
<br><span class="badge badge-secondary">8837191</span>
</td>
<td class="cat d-none d-sm-table-cell">Ropa <i class="icon icon-chevron-right"></i> Shirts</td>
<td class="price money">15.00</td>
<td class="views number d-none d-sm-table-cell">0</td>
<td class="photos number d-none d-sm-table-cell">0</td>
<td class="boolean"><i class="icon icon-times text-muted"></i>
</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="action"><a href="products.edit.php?id=39" data-toggle="tooltip" title="Editar"><i class="icon icon-pencil"></i></a>
</td>
<td class="action"><a href="products.view.php?id=39" data-toggle="tooltip" title="Ver item"><i class="icon icon-file"></i></a>
</td>
<td class="action"><a href="#" data-action="delete" data-id="39" data-row="fa14b8d6ccce684b16e012ad1612dda0" data-toggle="tooltip" title="Eliminar"><i class="icon icon-times-circle"></i></a>
</td>
</tr>
<tr>
<td class="id d-none">65</td>
<td class="name">Shirt Colossus
<br><span class="badge badge-secondary">8836191</span>
</td>
<td class="cat d-none d-sm-table-cell">Ropa <i class="icon icon-chevron-right"></i> Shirts</td>
<td class="price money">52.00</td>
<td class="views number d-none d-sm-table-cell">0</td>
<td class="photos number d-none d-sm-table-cell">0</td>
<td class="boolean"><i class="icon icon-times text-muted"></i>
</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="action"><a href="products.edit.php?id=65" data-toggle="tooltip" title="Editar"><i class="icon icon-pencil"></i></a>
</td>
<td class="action"><a href="products.view.php?id=65" data-toggle="tooltip" title="Ver item"><i class="icon icon-file"></i></a>
</td>
<td class="action"><a href="#" data-action="delete" data-id="65" data-row="73f88b25670bc3d0c0a29a420a83c169" data-toggle="tooltip" title="Eliminar"><i class="icon icon-times-circle"></i></a>
</td>
</tr>
<tr>
<td class="id d-none">3</td>
<td class="name">Shirt Conmemorativa</td>
<td class="cat d-none d-sm-table-cell">Ropa <i class="icon icon-chevron-right"></i> Shirts</td>
<td class="price money">59.00</td>
<td class="views number d-none d-sm-table-cell">5</td>
<td class="photos number d-none d-sm-table-cell">5</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="action"><a href="products.edit.php?id=3" data-toggle="tooltip" title="Editar"><i class="icon icon-pencil"></i></a>
</td>
<td class="action"><a href="products.view.php?id=3" data-toggle="tooltip" title="Ver item"><i class="icon icon-file"></i></a>
</td>
<td class="action"><a href="#" data-action="delete" data-id="3" data-row="57049fcae700a38fca2a2cec333adb93" data-toggle="tooltip" title="Eliminar"><i class="icon icon-times-circle"></i></a>
</td>
</tr>
<tr>
<td class="id d-none">61</td>
<td class="name">Shirt Dagger
<br><span class="badge badge-secondary">8807191</span>
</td>
<td class="cat d-none d-sm-table-cell">Ropa <i class="icon icon-chevron-right"></i> Shirts</td>
<td class="price money">57.00</td>
<td class="views number d-none d-sm-table-cell">0</td>
<td class="photos number d-none d-sm-table-cell">0</td>
<td class="boolean"><i class="icon icon-times text-muted"></i>
</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="action"><a href="products.edit.php?id=61" data-toggle="tooltip" title="Editar"><i class="icon icon-pencil"></i></a>
</td>
<td class="action"><a href="products.view.php?id=61" data-toggle="tooltip" title="Ver item"><i class="icon icon-file"></i></a>
</td>
<td class="action"><a href="#" data-action="delete" data-id="61" data-row="d1ef2e4c6bc68e922b8b5086710e4c30" data-toggle="tooltip" title="Eliminar"><i class="icon icon-times-circle"></i></a>
</td>
</tr>
<tr>
<td class="id d-none">67</td>
<td class="name">Shirt Dazzler
<br><span class="badge badge-secondary">8837991</span>
</td>
<td class="cat d-none d-sm-table-cell">--</td>
<td class="price money">15.00</td>
<td class="views number d-none d-sm-table-cell">0</td>
<td class="photos number d-none d-sm-table-cell">0</td>
<td class="boolean"><i class="icon icon-times text-muted"></i>
</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="action"><a href="products.edit.php?id=67" data-toggle="tooltip" title="Editar"><i class="icon icon-pencil"></i></a>
</td>
<td class="action"><a href="products.view.php?id=67" data-toggle="tooltip" title="Ver item"><i class="icon icon-file"></i></a>
</td>
<td class="action"><a href="#" data-action="delete" data-id="67" data-row="0db0e976eea168de09560ae03785a461" data-toggle="tooltip" title="Eliminar"><i class="icon icon-times-circle"></i></a>
</td>
</tr>
<tr>
<td class="id d-none">66</td>
<td class="name">Shirt Deadpool
<br><span class="badge badge-secondary">8837191</span>
</td>
<td class="cat d-none d-sm-table-cell">Ropa <i class="icon icon-chevron-right"></i> Shirts</td>
<td class="price money">13.00</td>
<td class="views number d-none d-sm-table-cell">0</td>
<td class="photos number d-none d-sm-table-cell">0</td>
<td class="boolean"><i class="icon icon-times text-muted"></i>
</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="action"><a href="products.edit.php?id=66" data-toggle="tooltip" title="Editar"><i class="icon icon-pencil"></i></a>
</td>
<td class="action"><a href="products.view.php?id=66" data-toggle="tooltip" title="Ver item"><i class="icon icon-file"></i></a>
</td>
<td class="action"><a href="#" data-action="delete" data-id="66" data-row="dd7793ed3b3212093298d9fc72893c86" data-toggle="tooltip" title="Eliminar"><i class="icon icon-times-circle"></i></a>
</td>
</tr>
<tr>
<td class="id d-none">47</td>
<td class="name">Shirt Flash
<br><span class="badge badge-secondary">8837191</span>
</td>
<td class="cat d-none d-sm-table-cell">Ropa <i class="icon icon-chevron-right"></i> Shirts</td>
<td class="price money">17.00</td>
<td class="views number d-none d-sm-table-cell">0</td>
<td class="photos number d-none d-sm-table-cell">0</td>
<td class="boolean"><i class="icon icon-times text-muted"></i>
</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="action"><a href="products.edit.php?id=47" data-toggle="tooltip" title="Editar"><i class="icon icon-pencil"></i></a>
</td>
<td class="action"><a href="products.view.php?id=47" data-toggle="tooltip" title="Ver item"><i class="icon icon-file"></i></a>
</td>
<td class="action"><a href="#" data-action="delete" data-id="47" data-row="4c932d6070de8411f31796c92c33be21" data-toggle="tooltip" title="Eliminar"><i class="icon icon-times-circle"></i></a>
</td>
</tr>
<tr>
<td class="id d-none">58</td>
<td class="name">Shirt Gambit
<br><span class="badge badge-secondary">8857191</span>
</td>
<td class="cat d-none d-sm-table-cell">Ropa <i class="icon icon-chevron-right"></i> Shirts</td>
<td class="price money">54.00</td>
<td class="views number d-none d-sm-table-cell">0</td>
<td class="photos number d-none d-sm-table-cell">0</td>
<td class="boolean"><i class="icon icon-times text-muted"></i>
</td>
<td class="boolean"><i class="icon icon-check text-success"></i>
</td>
<td class="action"><a href="products.edit.php?id=58" data-toggle="tooltip" title="Editar"><i class="icon icon-pencil"></i></a>
</td>
<td class="action"><a href="products.view.php?id=58" data-toggle="tooltip" title="Ver item"><i class="icon icon-file"></i></a>
</td>
<td class="action"><a href="#" data-action="delete" data-id="58" data-row="0ed400f2cb9efb4c49e7498968bc71ab" data-toggle="tooltip" title="Eliminar"><i class="icon icon-times-circle"></i></a>
</td>
</tr>
</tbody>
<tfoot><tr><td colspan="11"><nav aria-label="Pages"><ul class="pagination pagination-sm"></ul></nav></td></tr></tfoot>
</table>
<div>
I've added a live example here: https://jsitor.com/g2vfIazy1
Solution
I've just added one line to fix this in the source code of the file list.js and I made an exact example of what you have and it did work for me, hope it works for you as well.
Just search for this code sample in your .js file and add the pointed line to it.
<script>
values: function(values, value, searchArgument) {
if (values.hasOwnProperty(value)) {
var text = toString(values[value]).toLowerCase();
text = text.replace(/(<([^>]+)>)/ig," "); // this is the line I added
if (fuzzy(text, searchArgument, options)) {
return true;
}
}
return false;
}
</script>
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices