テキスト入力欄ピッカー

入力欄にフォーカスし、リストから文字列をセット

jQuery

$(function () { // フォーカス時にリストを表示 $('#keyword').focusin(function() { $('#box').show(); }); // テキストを選択 $('li').click(function() { $('#keyword').val($(this).text()); $('#box').hide(); }); // マウスカーソルがキーワードまたはボックス上/外 $('#keyword, #box').hover(function(){ over_flg = true; }, function(){ over_flg = false; }); // メニュー領域外をクリックしたらボックスを閉じる $('body').click(function() { if (over_flg == false) { $('#box').hide(); } }); });

CSS

#box { display: none; position: relative; } ul { position: absolute; top: 0; left : 0; } li:hover { cursor: pointer; }

HTML

<input type="text" id="keyword"> <div id="box"> <ul> <li>PHP</li> <li>Smarty</li> <li>HTML</li> <li>CSS</li> <li>jQuery</li> <li>PostgreSQL</li> <li>ツール</li> <li>Office</li> <li>未分類</li> </ul> </div>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。