There is a table that uses the fuzzysearch quick search library. This character entry search generates a new table displaying the search results.
It is written on js so that a checkbox appears near the key cell (line number), when clicked, the selection results are summed up in the #Number field ("Search results: 1, 5, 15", etc.).
Here is the code itself:
var options = { valueNames: ['number', 'name'] }; var userList = new List('users', options); $(document).ready(function() { $('td.number').prepend('<input type="checkbox" class="checkbox"></input>') $('.checkbox').on('click', function() { ids = $.map($('.checkbox:checked'), function(checkbox, index) { return $(checkbox.closest('td')).text() }) $('#Number').val(ids.join(', ')) }) }) The problem is that it all works on the current table. As soon as I enter new characters in the search field that will change the table, all new checkboxes erase old ones. Therefore, I am looking for a solution that will be able to save all results first in the storage, regardless of which table is now formed, and will display the final result in the #Number field.
Ps In js I am very new) Please help)
All code:
var options = { valueNames: ['number', 'name'] }; var userList = new List('users', options); $(document).ready(function() { $('td.number').prepend('<input type="checkbox" class="checkbox"></input>') $('.checkbox').on('click', function() { ids = $.map($('.checkbox:checked'), function(checkbox, index) { return $(checkbox.closest('td')).text() }) $('#Number').val(ids.join(', ')) }) }) .list { font-family: sans-serif; } #users { overflow: auto; max-height: 200px; } .list td { padding: 10px; border: solid 1px #eee; } td.name { width: auto; text-align: left; } #searchbox input { border: none!important; border-radius: 3px; padding: 3px 5px!important; margin-bottom: 10px; } #searchbox input:focus { outline: none; border-color: #aaa; } .sort { padding: 8px 30px; border-radius: 6px; border: none; display: inline-block; color: #fff; text-decoration: none; background-color: #28a8e0; height: 30px; } .sort:hover { text-decoration: none; background-color: #1b8aba; } .sort:focus { outline: none; } .sort:after { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid transparent; content: ""; position: relative; top: -10px; right: -5px; } .sort.asc:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; content: ""; position: relative; top: 4px; right: -5px; } .sort.desc:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #fff; content: ""; position: relative; top: -4px; right: -5px; } #searchbox { margin-top: -28px; margin-left: 5px; position: absolute; } #users-title h3 { padding: 6px 0 6px 0; margin-top: 0; border-radius: 5px 5px 0 0; } #users-title {} #users { margin-bottom: -10px; } <div id="users-title"> <h3 class="toggler">Π‘ΠΏΠΈΡΠΎΠΊ ΠΏΠΎΠ΄ Π·Π°ΠΊΠ°Π· - ΠΎΡ 14.02.2016</h3> </div> <div id="users"> <div id="searchbox"> <input class="search" placeholder="Π§ΡΠΎ ΠΈΡΠ΅ΠΌ?" type="text" /> </div> <table style="width: 100%;"> <tbody class="list"> <tr> <td class="name" colspan="2" style="text-align: center;"><strong><span style="color: #ff0000;">Π‘ΠΏΠΈΡΠΎΠΊ</span></strong> </td> </tr> <tr> <td class="number">1</td> <td class="name">ΠΠΌΡ</td> </tr> <tr> <td class="number">2</td> <td class="name">ΠΠΌΡ1</td> </tr> </tbody> </table> </div> <script src="media/list.js" type="text/javascript"></script> <script src="media/list.fuzzysearch.js" type="text/javascript"></script> <script type="text/javascript"> The #Number field is in the feedback form.
