如何使用纯javascript添加一个自动完成字段

Question

我正在实现javascript库阿诺，它允许在图像上添加注释。我的目标是能够链接内容与部分图像选择与一个臭名昭著。当我们选择一个区域，一个臭名昭著的打开一个表单，我们可以个性化地添加我们想要与该区域链接的信息。在我的例子中，我添加了一个字段文本，但我希望它使用自动完成，但我不知道如何激活这个行为。

对于core/lib/Drupal/Core/Render/Element/FormElement.php，中的代码，form元素添加类'form- autocomplete‘和属性’data-autocomplete‘等于输入的自动完成函数的url，并注入库核心/drpal.autoComplete。关于这一点，我试图复制同样的行为。但是我想有些东西是缺少的，因为当我输入端点时，我的字段不会查询它，但是我不知道为什么。我还认为这可能不起作用，因为它是在加载页面后由javascript添加的，但在本例中，我不知道如何解决这个问题。

这里我的代码：

我的小部件字段：

class ImagePinWidget extends ImageWidget {

  public static function process($element, FormStateInterface $form_state, $form) {
    $element = parent::process($element, $form_state, $form);

    $element['preview']['#attributes'] = array('id' => array('my-image'));

    $element['#attached']['library'][] = 'my_module/image-pin';
    $element['#theme'] = 'image_pin_widget';

    return $element;
  }

}

我的my_module.libraries.yml

recogito-annotorious:
  version: 1.x
  css:
    component:
      /libraries/annotorious/annotorious.min.css: { minified: true }
  js:
    /libraries/annotorious/annotorious.min.js: { minified: true }

annotorious-toolbar:
  version: 1.x
  js:
    https://cdn.jsdelivr.net/npm/@recogito/annotorious-toolbar@latest/dist/annotorious-toolbar.min.js: { type: external, minified: true }

image-pin:
  version: 1.0.0
  css:
    component:
      css/image-pin.css: {}
  js:
    js/image_pin.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings
    - my_module/recogito-annotorious
    - core/drupal.autocomplete
    - my_module/annotorious-toolbar

image_pin.js：

(function ($, Drupal, drupalSettings, Annotorious) {

  'use strict';

  Drupal.behaviors.redacto_form_image_pin = {
    attach: function (context) {
      var config = {
        image:'my-image',
        widgets: [
          Drupal.behaviors.my_module_image_pin.nodeSelectorWidget,
        ],
      };

      var anno = Annotorious.init(config);

      Annotorious.Toolbar(anno, document.getElementById('toolbar'));
    },

    /**
     * Dynamic behavior when the status changes.
     *
     * @param $status
     */
    nodeSelectorWidget: function (args) {

      // Adding the autocomplete field
      var createField = function() {
        var input = document.createElement('input');

        input.classList.add('form-autocomplete');
        input.setAttribute('data-autocomplete-path', '/fr/autocomplete/custom');

        return input;
      }

      var container = document.createElement('div');
      container.className = 'nodeselector-widget';

      container.appendChild(createField());

      return container;

    }

  };

})(jQuery, Drupal, drupalSettings, Annotorious);

我精确地定义了路径/fr/ autocomplete /虫，正确地返回了json内容列表，并以通常的形式自动完成了创建，并正确地使用了它。使用此自定义自动完成的常用drupal形式的自动完成示例：

$element['test_autocomplete'] = [
     '#type' => 'textfield',
     '#title' => t('Autocomplete Articles'),
     '#autocomplete_route_name' => 'my_module.custom_autocomplete',
   ];

Answer 1

感谢克莱夫的帮助！若要激活自动完成，应在添加新元素后重新附加自动完成行为。

nodeSelectorWidget: function (args) {

      // Adding the autocomplete field
      var createField = function() {
        var input = document.createElement('input');

        input.classList.add('form-autocomplete');
        input.setAttribute('data-autocomplete-path', '/fr/autocomplete/custom');

        return input;
      }

      var container = document.createElement('div');
      container.className = 'nodeselector-widget';

      container.appendChild(createField());

      // Re-attach autocomplete behavior to active the autocomplete on the added input
      Drupal.behaviors.autocomplete.attach(container);


      return container;

    }