Игнорирование содержимого HTML при поиске в таблице с помощью ListJS - PullRequest
Новая
       14

Игнорирование содержимого HTML при поиске в таблице с помощью ListJS

0 голосов
/ 20 апреля 2020

Я использую Список JS 1.5.0 для разбивки на страницы и фильтрации записей на основе ввода пользователя в поиске input . Он работает отлично, за исключением одной маленькой детали: совпадение не игнорирует части содержимого html. Например, первый элемент имеет это содержимое внутри ячейки name: 

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

Если в поле поиска ввести Antman , он фильтрует таблицу с единственной записью, которая имеет содержимое в ячейке имени (это нормально). Но если ввести class , он также найдет эту запись и, конечно, все другие записи, которые имеют тег html с именем класса. Мне нужен способ игнорировать теги html при фильтрации записей. Я безуспешно изучал параметры, свойства и методы List API .

Searching for class returns all rows that contain an html tag with a classname

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

Есть идеи? Спасибо!

1 Ответ

1 голос
/ 26 апреля 2020

Я только что добавил одну строку, чтобы исправить это в исходном коде списка файлов. 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>

Надеюсь, это работает для вас. Если нет, скажите мне рассмотреть другое решение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...