データを扱うテーブルなどにインクリメンタルサーチをjQueryを利用して実装する
返ってくる結果が膨大になりがちな検索結果(特に管理画面など)などでは、そこからさらにデータを絞り込みを行いたい場合もあるかと思います。毎回ページの遷移があったのではユーザーの負担になりがちです。
そこでjQueryを利用してインクリメンタルサーチを実装する方法をメモもかねて紹介します。
パスワード入力欄の最後の文字列をヒントとして表示するjQueryプラグイン
IT Mediaの記事でパスワードの「****」は不要…という記事(以下参照)がありましたが、ブコメにiPhone UIが〜〜というのがあったので、じゃあということでついカッとなってjQueryプラグインを書いた。
Webサイトなどでパスワードを入力する際、「****」を使って入力した文字が見えないようにする必要はないのではないか——。そんな提案をめぐり、研究者が賛否両論を展開している。
パスワード入力は僕もよくタイプミスをして全部打ち直します。どうにかしてください本当に。
それにしてもiPhoneのUIはとてもよくできてますね。使っていて本当に気持ちがいいです。
使っていて気持ちがいいサイト設計というのは簡単なようでとても難しいものなので、小さなことからでもユーザーの負担を減らしていければいいですね。
セレクトボックスに新しいオプションを追加していけるスクリプト
セレクトボックスの(value)を選択すると、セレクトボックスが消えて代わりにINPUT要素が選択状態で表示されるので、追加する単語を入力してドキュメント上の適当な箇所をクリックするか、returnキーで決定することで入力項目をセレクトボックスに新しく追加できるスクリプトです。説明がなにやらややこしい感じなので、実際にサンプルを見てもらったほうが早いと思います。
先日のtangoHokanと同じような感じなので、使いどころは微妙ですが。
そもそも、それができる、ということを補足説明などでユーザに伝える必要があると思いますが、ひとつの選択肢としてあればそのうち使う日がくるかもしれません。。
Safari独自実装のinput type=”search”のような検索窓を実装する
先日、iPhone風のテキストボックスの文字を消去するボタンを実装するチュートリアルを書いたのですが、どうやらSafariの独自実装でinput type=”search”というのがあるんですね。全然知らなかった…じゃあいっそのことplaceholderも付けてinput type=”search”っぽくしてみようということで、delval.jsをちょちょっと変えてinput type=”search”ぽい検索窓を実装してみます。これもかなり簡単にできるので、じゃあチュートリアル…？？
左が今回作ったサンプルで、右がSafari独自実装のinput type=”search”。そっくり！
サンプル – サンプルの下にあるINPUTをSafariで見ると…！
サンプルファイルのダウンロード
TITLE属性を利用した簡単ツールチップの作り方 jQuery編
散々既出な気がするネタシリーズ。TITLE属性をツールチップで表示させるやつです。簡単なヘルプとか表示してあげるとユーザビリティを向上させることができる場合がありますよね。jQueryを使うととても簡単につくれます。というよりも、使いたいときにさらっとコピってすぐ使えると思うので頭の片隅にでも置いておくと便利かもしれません。