Scroll

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

カテゴリ:HTML/CSS JQuery Web/DTP
タグ:
公開日:2017/06/30(金)

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

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



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

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


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

jQuery設定

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

検索フォーム設定

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


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

まとめ

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

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


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

カテゴリー

アーカイブ