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


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



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

tableの検索を実装する際に、行数が100程度だったのでサーバーにリクエストにせずにjQueryで検索できるようにしてみました。


(行数が多い場合はサーバーにリクエストして検索結果を表示した方がいいかもしれません)

jQuery設定

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

検索フォーム設定

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


class名で検索することで複雑な検索に対応できます。

まとめ

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