[jQuery]検索フォームをjQueryで実装


サーバーに負担をかけたくない時には、jQueryに頼ることが多いです。

検索したいけどブラウザ側で完結したい

tableの検索を実装する際に、行数が100程度だったのでサーバーにリクエストにせずにjQueryで検索できるようにしてみました。
(行数が多い場合はサーバーにリクエストして検索結果を表示した方がいいかもしれません)

jQuery設定

<input>タグのtype属性がsearchの場合、入力があると自動でtableを検索し一致した行のみ表示します。

検索フォーム設定

検索したい項目に対してclass名を設定することで検索できます。
class名で検索することで複雑な検索に対応できます。

まとめ

今回はtableのみでしたが、リスト等でも対応できます。