flexdatalistを改良してみた

flexdatalistはオートコンプリート機能を簡単に実現できるjQueryのプラグインです。

オプションで「multiple=’multiple’」と設定すれば半角カンマ区切りで複数の値を入力できます。

が、半角カンマ区切りでの複数の値の入力はPCのみ有効で、スマホで半角カンマを入力しても反応しません。

さらにこれもオプションで「selectionRequired:false」とすれば(デフォルトでfalse)、データリストにない値も入力することが可能だが、PCとiPhoneの場合はエンターキーを入力すれば入力が確定するが、Androidの場合は入力が確定せず。。。

これを解決するためにflexdatalistを少し改良してみた。

まずは改良前のコード。

1383 /**
1384 * Remove results container.
1385 */
1386 empty: function (text) {
1387 if (_this.isEmpty(text)) {
1388 return;
1389 }
1390 var $container = this.container(),
1391 keyword = $alias.val();
1392
1393 text = text.split('{keyword}').join(keyword);
1394 $('<li>')
1395 .addClass('item no-results')
1396 .append(text)
1397 .appendTo($container)
1398 },

次に、改良後のコード。

1383 /**
1384 * Remove results container.
1385 */
1386 empty: function (text) {
1387 if (_this.isEmpty(text)) {
1388 return;
1389 }
1390 var $container = this.container(),
1391 keyword = $alias.val();
1392
1393 text = text.split('{keyword}').join(keyword);
1394 $('<li>')
1395 .addClass('item active no-results')
1396 .append(text)
1397 .on('click', function(event) {
1398 _this.fvalue.extract(keyword);
1399 _this.results.remove();
1400 })
1401 .appendTo($container)
1402 },

これで、データリストにない値(例えばPythonなど)を入力すると入力エリアの下に表示される「No results found fo “Python”」をタップすれば入力が確定するようになった！

根本的な解決にはなっていないし、他のライブラリを使えばいい話なんだけど、既存のシステムでflexdatalistを使ってて直す必要があったので。

下記に実際のデモを作ったので是非スマホで試してみてください。

改良前

改良後