使用 ListJS 搜索 table 时忽略 HTML 内容

Question

我正在使用 ListJS 1.5.0 根据用户在搜索中的输入对记录进行分页和过滤 input。它工作正常，除了一个小细节：匹配没有忽略内容的 html 部分。例如，第一项在 name 单元格中包含此内容：

Shirt Antman
<br><span class="badge badge-secondary">8237191</span>

如果在搜索框中键入 Antman，它会使用名称单元格中包含该内容的唯一记录过滤 table（没问题）。但是，如果键入 class，它还会找到该记录，当然还有所有其他记录，这些记录具有带有 class 名称的 html 标记。我需要一种在过滤记录时忽略 html 标签的方法。我查看了 List API 选项、属性和方法，但没有成功。

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">&nbsp;</th>
            <th scope="col" class="action">&nbsp;</th>
            <th scope="col" class="action">&nbsp;</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>

我在这里添加了一个实例：https://jsitor.com/g2vfIazy1

Answer 1

我刚刚在文件 list.js 的源代码中添加了一行来解决这个问题，我做了一个你所拥有的的确切例子，它对我有用，希望它对你有用嗯

只需在您的 .js 文件中搜索此代码示例并将指向的行添加到其中。

<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>

使用 ListJS 搜索 table 时忽略 HTML 内容

Ignoring HTML content when searching a table with ListJS

jquery

listjs