jQuaryのQuicksearchで最初に表示されるテーブルを空にしたい

###前提・実現したいこと
jQuaryのQuicksearchで検索する際に、最初に表示されているテーブルを空の状態にして、検索をしたらその検索結果が表示されるようにしたいので、具体的な手段を教えていただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

質問者さんが実現したいことは以下のように行うことができると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<form>
9    <input type="text" id="search">
10</form>
11<table>
12    <tbody>
13    <tr>
14        <td>text1</td>
15        <td>AAA</td>
16    </tr>
17    <tr>
18        <td>text2</td>
19        <td>BBB</td>
20    </tr>
21    <tr>
22        <td>text3</td>
23        <td>CCC</td>
24    </tr>
25    </tbody>
26</table>
27<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
28<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.4.0/jquery.quicksearch.min.js"></script>
29<script>
30    $("input#search").quicksearch("table tbody tr", {
31        "onAfter": function () {
32            if ($(this).val() === "") {
33                $("table tbody tr").css({display: "none"});
34            }
35        }
36    });
37</script>
38</body>
39</html>