テキスト入力欄ピッカー
入力欄にフォーカスし、リストから文字列をセット
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>
サンプル
