create a filter searchbox to a checkbox list- dynamic response listing

I need to do a form with a long list of item with checkbox for user to tick and pick their options. Because the list has hundreds of item, so to make the search job easy, I thought if I could have a search box act like a filter. when the user enters something, it will filter the list to match the entered text. for example when user enter “A”, only items with “A” will be display in the list. the user will repeat searching for item and tick the checkbox on item they wanted. and then when the searchbox is empty, the full list should be displayed. in the end, the user click submit, all the checked item should be post to the next page. (I hope my explanation is clear enough to understand.) Was thinking js “onchange” function might solve the problem but with my limited knowledge on js, I have no idea how to.

For example my code:

<form name="submit" action="envelope.php" method="POST">
                <table width="100%" cellspacing="0" cellpadding="3">
                    <tr>
                        <td></td>
                        <td colspan="2"></td>
                        <td><input type="text" name="search" onchange="filter()"/></td>
                    </tr>
                    <?php
                    $i=0;
                    $str = "SELECT * FROM item ";
                    $query = mysql_query($str) or die(mysql_error());
                    while($row = mysql_fetch_array($query))
                    { 
                        $i++; ?>
                        <tr>
                            <td style="border-bottom: 1px #cccccc solid" width="10">&nbsp;&nbsp;<?php echo $i ?>.</td>
                            <td style="border-bottom: 1px #cccccc solid"><input type="checkbox" name="itm[]" value="<?php echo $row['ID'] ?>"/></td>
                            <td style="border-bottom: 1px #cccccc solid"><?php echo $row['ID'] ?></td>
                            <td style="border-bottom: 1px #cccccc solid"><?php echo $row['name'] ?></td>
                        </tr>
                        <?php
                    } ?>
                </table>
            </div>
            <br/>
            <input type="submit" name="submit" value="submit"/>
        </form>

the input text field would be the search filter. Appreciate if someone could advise. Thank you in advance!

Answer

use datatable.it provide textbox to filter data from table it apply to all column visit below link datatables

Advertisement

Answer