読者です 読者をやめる 読者になる 読者になる

jquery-textcompleteでドロップダウンがウィンドウ外にはみ出る問題の対応

概要

画面一番下に入力ボックス置いて、そこでjquery−textcomplete使ったら候補表示のドロップダウンがブラウザ外に見切れちゃう問題が起きた。
一応表示位置変更でどのDOMにくっつけるかをオプションで指定できるっぽいけどよくわかんなかったから、とりあえず縦側は必ず収まるようにしてみた。

  • before

http://i.gyazo.com/3d0fb3fa2531aac3083693b0963bf6e3.gif

  • after

http://i.gyazo.com/991eebb220fe27d979eff7ac3364d8ae.gif

コミット

github.com

解説

  • 表示位置の修正
    入力ボックスのすぐ下をtopにして絶対座標で設定していたので、(topの座標 + ドロップダウンの高さ) > ウィンドウ高さ が真なら、ドロップダウンのtop=ウィンドウの高さ - ドロップダウンの高さになるようにした。

  • 表示位置確定タイミングの変更
    サジェスト表示が始まって、ドロップダウンが表示されたタイミングでのみ、top座標を設定していて、2文字目以降の入力による変化ではtop座標を書き換えていなかった(必要なかった)ので、サジェスト候補更新ごとにtop座標を設定し直すようにした。

所感

元のjquery-textcompleteのリポジトリ見るとプルリクとかイシューとか溜まっててアップデートされなそうで残念