提案してくれるけど、自由文章も記入できるINPUT要素 の ライブラリ
読んで字の如く、そして上に例として動かした通りのことをやるライブラリを作成しました。
やりたかったのは、Select要素と普通のInput要素を足して、そして互いに邪魔しない、という状態です。
ソースコード
自由にお使いください。
初版: 2021.03.31
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<html> <head> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <!-- jQueryをCDNから読み込みます。 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.12.0/underscore-min.js"></script> <!-- underscore.js を読み込みます。--> </head> <body> <input id="target" /> <script> Suggester = function(target_name, list){ let _t = $(target_name) _t.attr('autocomplete', 'nope'); let width = _t.outerWidth() let height = _t.outerHeight() _t.parent().css("position","relative") let _d = ["<div class='suggester' style='top:"+height+"px; width:"+width+"px'>"] for( let i = 0; i < list.length; i++ ){ _d.push( "<a data=\""+list[i]+"\">"+list[i]+"</a>" ) } _d.push("</div>") _t.parent().append(_d.join("")) let suggester = $(target_name + " ~ .suggester") let suggester_a = $(target_name + " ~ .suggester a") let num = -1 let isOriginal = function(){ let _v = _t.val() let _r = true _.each( list, function(l){ if( _v == l ){ _r = false } }) return _r } _t.focus(function(e){ num = -1 suggester.show() }) _t.blur(function(e){ num = -1 suggester.hide() suggester_a.removeClass("on") }) suggester_a.hover( function(e){ _t.val($(e.target).attr("data")) _t.trigger("change") } ) _t.keyup(function(e){ if( e.keyCode == 40 ){ if( _t.val() == "" || !isOriginal() ){ num++ if( num > (list.length-1) ){ num = (list.length-1) } } }else if( e.keyCode == 38 ){ num-- if( num < -1 ){ num = -1 } }else if( e.keyCode == 13 ){ num = -1 suggester.hide() suggester_a.removeClass("on") } if( num > -1 ){ suggester.show() suggester_a.removeClass("on") $(suggester_a[num]).addClass("on") _t.val($(suggester_a[num]).attr("data")) }else{ } return true }) } </script> <style> .suggester{ display: none; z-index: 50; position: absolute; top: 0px; left: 1px; background-color: white; border: 1px solid gray; } .suggester a{ display: block; padding: 5px; cursor: pointer; } .suggester a:hover{ color: white; background-color: black; } .suggester a.on{ color: white; background-color: black; } </style> <script> Suggester("#target",["サジェストを","簡単に設定して","マウスや","キーボードの矢印で選択","自由文章も可能"]) </script> </body> </html> |
