google-chrome - Chrome 和 IE 不会触发 Drupal 7 中自动完成字段的“更改”事件

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 Autocomplete 使用事件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

尝试使用“autocompletechange”事件。有些人喜欢这个代码

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