Scroll

「常に新しい技術に目を向けること」
「既存の技術をより深堀りすること」

カテゴリ:JQuery
タグ:
公開日:2017/06/30(金)
最終更新日:2021/08/12(木)

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

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

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

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

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

jQuery設定

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

検索フォーム設定

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

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

まとめ

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

この記事を書いた人:ヤス


シェアのご協力をお願いいたします!

カテゴリー

アーカイブ