入力できるプルダウンボックス（セレクトボックス）

2020年1月10日

スポンサーリンク

■前説

お客様からのご要望で自由に入力できるプルダウンボックス（セレクトボックス）がほしい、要するに、選択できるし、入力できるプルダウンボックス（セレクトボックス）があったら、お客様の作業効率がアップするではないかという考え方です。
真っ先に「Vue.js」を思い出しましが、プロジェクトにjqueryを既に使っているし、ライブラリ増えるとことで画面のロード時間が若干落ちるし、社内システムの癖に、セキュリティ検査が厳しくて、新規ライブラリを使う理由と審査の対応がめんどくせーと嫌なので、「Vue.js」をまずは、諦めました。
HTML5の「datalist」も検討しましたが、残念ながらHTML5の「datalist」は一回値を選択した後に、ほかの値を選択したい場合、現在値をクリアしない限りに、プルダウンボックス（セレクトボックス）が永遠に出れなくなるという非常に不思議な挙動があるため、「datalist」も捨てました。（将来「datalist」の仕様が変わるだろう）
JQuery UIのcomboboxも良さそうですが、自由に入力できないため、却下しました。

■考え方

一番ベストの「Vue.js」を捨てるから、残った道は、自作しかないです。
いろいろ考えた上で、JQuery UIの「Autocomplete」を利用し、「input」要素に少し手を入れたらできるかもしれないと自信がなく、決めました。

・「input」要素に「data-options」を追加し、「Autocomplete」の「source」にその値を設定する。
・確かに全ての値をクリアしないと、「Autocomplete」のプルダウンボックス（セレクトボックス）が表示されないという記憶があって、ここどうクリアするのは不明です。
残ったのは、試してやるしかない！

■実現

１．「input」要素に「data-options」を追加する

下記のように、カンマ区切りで、プルダウンボックス（セレクトボックス）に表示したい値を「data-options」属性に追加します。
※当然の話ですが、実際のプログラムでは、data-optionsの値が動的に設定されます。

1
2
3
4
5
 
 
<input type="text" name="sample_free_dropdown" value="" data-options="JAVA,PHP,C#"  class="free_dropdown" />
 
 

２．JavaScriptで「Autocomplete」を適用する

No.１の「input」要素のclickイベントで、JQuery UIの「Autocomplete」を適用して、プルダウンボックス（セレクトボックス）ような動きをさせます。
「input」要素の「data-options」属性値をカンマで分割し、「Autocomplete」の「source」に設定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
$('.free_dropdown').on('click focus', function () {
 
//「input」要素の「data-options」をカンマで分割し、配列にする。
var options = $(this).data("options").split(',');
$(this).autocomplete({
source: options,
minLength: 0,
delay : 1,
autoFocus: false,
scroll:true,
});
 
});
 
 

３．残ったのは、試してやるしかない

No.２までの実装は簡単でしたが、動作確認した結果、やはり、事前に心配した通り、プルダウンボックス（セレクトボックス）が表示されない！
いろいろ調べたり、試したりした結果、「Autocomplete」の「search」の値を空文字にして、さらに「minLength」の値を「0」にすれば、なんと、上手くできました。（拍手！！！）
実装は下記の通りです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
$('.free_dropdown').on('click focus', function () {
 
//「input」要素の「data-options」をカンマで分割し、配列にする。
var options = $(this).data("options").split(',');
$(this).autocomplete({
source: options,
minLength: 0,  // 「0」を設定したら、全ての項目を表示する。
delay : 1,
autoFocus: false,
scroll:true,
　　　　　　　　position:{ my : "right top", at: "right bottom", collision: "flip" } //不具合対応
});
$(this).autocomplete("search", "");//この行を入れないと、初回にプルダウンボックス（セレクトボックス）が効かないという不具合がある
 
});
 
 

■サンプル

今回の作品のサンプルです。比較対象として、HTML5の「datalist」もここに例を作りました。いろいろ試してみてください。

　

　

■ソース

今回のサンプルソースです。
ダウンロード：入力できるプルダウンボックス（セレクトボックス）

■追記

プルダウンボックスのカスタマイズ方法を追記させていただきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
/* ボーダーの色 */
.ui-widget-content {
    border: 1px solid #999 !important;
}
 
/* ボーダーの角を９０度にする */
.ui-corner-all{
border-radius: 0px  !important;
}
/* 文字の色、文字サイズ */
.ui-widget-content a {
    color: #999 !important;
    font-size: 14px !important;
}
 
 

※考え方：ブラウザの開発ツールなどで、jqueryのcssを探せば、カスタマイズしてほしい項目が見つけるはずと思います。

■追記2

読者から下記の4点の指摘を頂きました。ありがとうございました。
指摘点とその対策を追記させていただきます。
１．ブラウザの入力候補(autocomplete)機能が邪魔で、候補リストとプルダウンボックスが被っているため、中身がみえなくる。
⇒対策：$('.free_dropdown’).attr('autocomplete’, 'off’);　を追加して、ブラウザの入力候補(autocomplete)機能を殺す。

２．画面内部のスクロールバーを回すと、プルダウンボックスも上下に移動する。Windowのスクロールバーを回すと、問題ない。
⇒対策：下記のように、ブラウザの仕様に合わせて、スクロールバーを回すと、プルダウンボックスを非表示にする。

1
2
3
4
5
6
7
8
9
10
 
 
$('*').on('scroll', function (e) {
$(".ui-autocomplete").hide();
});
$(window).on('scroll', function (e) {
$(".ui-autocomplete").hide();
});
 
 

３．プルダウンボックスがブラウザの下側に隠れた場合、スクロールしないと、見えなくなる。
⇒対策：JQuery UIの「Autocomplete」機能のpositionオプションを利用して、collisionの値を"flip"にして、プルダウンボックスが隠れる場合、下ではなく、上に表示するように、対応する。上記のサンプルを修正しましたので、そちらをご参考ください。

４．Tabキーで移動して来た場合、プルダウンボックスが表示されていない。
⇒対策：clickイベントを加えて、focusイベントを追加する。上記のサンプルを修正しましたので、そちらをご参考ください。

■最後

ここまで実現できなかった残念な２点があります。
１．プルダウンボックス（セレクトボックス）の▼矢印がない。（▼矢印をCSS擬似要素で作ってみましたが、見栄えが悪かったため、やめました）
２．key/valueを対応できない、（なんか、対応する意味がないと思います。かえって、サーバー側に迷惑をかける）
やはり、「Vue.js」を使えたら、良いかもしれませんね。

スポンサーリンク

html, Javascriptセレクトボックス, プルダウンボックス, 入力

Posted by xiyuan