Question

我正在构建一个包含2个依赖字段的表单 - 第一个是过滤第二个字段。我正在使用Drupal 7 Form API并将'#ajax'属性用于第一个字段。第一个字段是Drupal自动完成，可能是因为这个“更改”事件未被触发。在Firefox中，它运行良好 - 在Chrome和IE上它没有。

我尝试在js脚本中检查更改事件，但根本没有触发它。

有什么想法吗？

Answer 1

在/misc/autocomplete.js

文件中进行以下更改

变化：

Drupal.jsAC.prototype.select = function (node) {
  this.input.value = $(node).data('autocompleteValue');
};

到：

Drupal.jsAC.prototype.select = function (node) {
  this.input.value = $(node).data('autocompleteValue');
  $(this.input).trigger('change');
};

这将允许更改触发器在单击自动完成列表中的选项时起作用。

为了在用箭头键选择并按Enter键时触发更改，您需要在hidePopup函数更改中添加触发器：

Drupal.jsAC.prototype.hidePopup = function (keycode) {
  // Select item if the right key or mousebutton was pressed.
  if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) {
    this.input.value = $(this.selected).data('autocompleteValue');
  }
  // Hide popup.
  var popup = this.popup;
  if (popup) {
    this.popup = null;
    $(popup).fadeOut('fast', function () { $(popup).remove(); });
  }
  this.selected = false;
  $(this.ariaLive).empty();

};

到：

Drupal.jsAC.prototype.hidePopup = function (keycode) {
  // Select item if the right key or mousebutton was pressed.
  if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) {
    this.input.value = $(this.selected).data('autocompleteValue');
    $(this.input).trigger('change');
  }
  // Hide popup.
  var popup = this.popup;
  if (popup) {
    this.popup = null;
    $(popup).fadeOut('fast', function () { $(popup).remove(); });
  }
  this.selected = false;
  $(this.ariaLive).empty();

};

对autocomplete.js文件进行这些更改后，您应该可以正常调用.change触发器。

Answer 2

Drupal 7自动填充功能使用事件autocompleteSelect。这包括使用鼠标或键盘完成选择和更改。根据您构建或更改表单的方式，您需要在不同的位置设置#ajax属性。将所有my_前缀值替换为代码特定变量。

在代码中自己构建表单将是：

$form['my_field']['#ajax'] = array(
  'event' => 'autocompleteSelect',
  'callback' => 'my_callback',
  'wrapper' => 'my_wrapper',
);

使用hook_form_FORM_ID_alter()这是：

$form['my_field']['my_language'][0]['target_id']['#ajax'] = array(
  'event' => 'autocompleteSelect',
  'callback' => 'my_callback',
  'wrapper' => 'my_wrapper',
);

Answer 3

尝试使用“自动填充更改”事件。有些人喜欢那段代码

$('your selector').on('autocompletechange', function() {
    code;
});

Chrome和IE不会为Drupal 7中的自动填充字段触发“更改”事件

3 个答案: