web-dev-qa-db-ja.com

フォームのテキストエリアにオートコンプリートを追加するにはどうすればよいですか？

Drupal 8.のtextareaフォーム要素にオートコンプリート機能を追加したいと思います。同じフォームでオートコンプリートが機能する、完全に機能するカスタムテキストフィールドがあります。 Textarea要素 にはprocessAutocomplete関数があるため、これが機能しない理由は不明です。

オートコンプリートをtextareaに追加するのは、ちょっと変わった方法だと思いますが、それは問題ではありません。私はこれをDrupal 8で行ったので、それが可能であることを知っています。フォームを使用してそれを達成したかどうかはわかりません。

ルーティングファイルに適切なコードを追加しました。

my_module.autocomplete_name:
   path: '/my-module/test-autocomplete'
   defaults:
     _controller:'\Drupal\my_module\Controller\Controller::functionName'
     _format: json
   requirements:
     _access: 'TRUE'

また、フォームにフィールドを適切に追加しました。

$form['text_area'] = [
  '#type' => 'textarea',
  '#title' => t('Test text area'),
  '#default_value' => $authentication_configuration->get('text_area'),
  '#autocomplete_route_name' => 'my_module.autocomplete_name',
];

最後に、参照されているコントローラーに適切なロジックがあります。

public function testAutocomplete(request $request) {
  // Set up the array to be returned and get the user input
  $matches = array();
  $input = $request->query->get('q');
  // If there is user input
  if ($input) {
    $words = explode(' ', $input);
    foreach ($words as $Word) {
      /*
       * Logic for generating an autocomplete list of matches
       */
    }
  }
  return new JsonResponse($matches);
}
8formsajax
4
Travis

Textareaはそのままではオートコンプリートをサポートしていません。機能させるには、少し工夫する必要があります。

最初に、オートコンプリート動作のattachメソッドをオーバーライドする必要があります。これを含むJSファイルを含むライブラリを追加します。

(function ($) {
  Drupal.behaviors.autocomplete.attach = function attach(context) {
    var $autocomplete = $(context).find('input.form-autocomplete,textarea.form-autocomplete').once('autocomplete');
    if ($autocomplete.length) {
      var blacklist = $autocomplete.attr('data-autocomplete-first-character-blacklist');
      $.extend(Drupal.autocomplete.options, {
        firstCharacterBlacklist: blacklist || ''
      });

      $autocomplete.autocomplete(Drupal.autocomplete.options).each(function () {
        $(this).data('ui-autocomplete')._renderItem = Drupal.autocomplete.options.renderItem;
      });

      $autocomplete.on('compositionstart.autocomplete', function () {
        Drupal.autocomplete.options.isComposing = true;
      });
      $autocomplete.on('compositionend.autocomplete', function () {
        Drupal.autocomplete.options.isComposing = false;
      });
    }
  };
})(jQuery);

この関数はコアattachメソッドのストレートコピーであり、textareaがセレクターに追加され、いくつかの参照が変更されています。

次に、オートコンプリートプロセスメソッドをフォーム要素に追加し（デフォルトではありません）、ライブラリも参照する必要があります。

use Drupal\Core\Render\Element\Textarea;

...

$form['text_area'] = [
  '#type' => 'textarea',
  '#title' => t('Test text area'),
  '#default_value' => $authentication_configuration->get('text_area'),
  '#autocomplete_route_name' => 'my_module.autocomplete_name',
  '#process' => [
    [Textarea::class, 'processAutocomplete'],
  ],
  '#attached' => [
    'library' => [
      'mymodule/autocomplete'
    ],
  ],
];

キャッシュをクリアすると、結果がすぐに表示されます。

6
Clive