Problem/Motivation

There is no way to add a value to the field from JavaScript. A list of terms drawn beside the field, where clicking one should add it, has nothing to call: the widget is built by the behaviour and the instance is thrown away.

Steps to reproduce

  1. Open a page with an Autocomplete Deluxe field.
  2. Look for a handle on the widget from the console.

Proposed resolution

Keep the widget in the jQuery data of the input, so addValue can be called:

jQuery('#autocomplete-deluxe-input').data('autocompleteDeluxe').addValue({ label: 'Drupal', value: 'Drupal (7)' });

The value is the same Label (id) pair the field stores, so the tag, the hidden value and the saved reference line up.

Two tags added from the console

Remaining tasks

  • ✅ File an issue
  • ✅ Addition/Change/Update/Fix
  • ✅ Testing to ensure no regression
  • ➖ Automated unit testing coverage
  • ➖ Automated functional testing coverage
  • ➖ UX/UI designer responsibilities
  • ➖ Readability
  • ➖ Accessibility
  • ➖ Performance
  • ➖ Security
  • ➖ Developer Documentation
  • ➖ User Guide Documentation
  • ➖ Reviewed by human
  • ➖ Code review by maintainers
  • ➖ Full testing and approval
  • ➖ Credit contributors
  • ➖ Review with the product owner
  • ➖ Release notes snippet
  • ❌ Release

User interface changes

  • N/A

API changes

  • The widget instance is available as jQuery data on the input, under autocompleteDeluxe.

Data model changes

  • N/A

Release notes snippet

  • The widget instance is available as jQuery data on the input, under autocompleteDeluxe.
CommentFileSizeAuthor
#9 3061562-add-from-javascript.png59.95 KBrajab natshah
#7 adds-widget-object-reference-to-element-3061562-1.patch529 byteseadamse
#6 0001-Adds-widget-object-reference-to-element.patch1.14 KBmtovey

Issue fork autocomplete_deluxe-3061562

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

sic created an issue. See original summary.

sic’s picture

sic commented

a possible way could maybe be something like this:

Drupal.behaviors.autocomplete_deluxe = {
    attach: function(context) {
      var autocomplete_settings = drupalSettings.autocomplete_deluxe;

      $('input.autocomplete-deluxe-form').once('attachAutocompleteDeluxe').each( function() {
        if (autocomplete_settings[$(this).attr('id')].multiple === true) {
          var widget = new Drupal.autocomplete_deluxe.MultipleWidget(this, autocomplete_settings[$(this).attr('id')]);
        } else {
          var widget = new Drupal.autocomplete_deluxe.SingleWidget(autocomplete_settings[$(this).attr('id')]);
        }

        $(this).data('autocomplete_deluxe', widget);
      });
    }
  };
daveiano’s picture

daveiano
Primary language German
commented

I have a similar use case - I also need to set the values of the automcomplete_deluxe field programmatically via JS.

Any luck with that? The code you posted is the initialization of the JS field widget from the module?

sic’s picture

sic commented

@daveiano i changed the module as mentioned above adding $(this).data('autocomplete_deluxe', widget); ...

rajab natshah’s picture

rajab natshah
he/him
commented
Version: 8.x-1.x-dev » 2.0.x-dev
mtovey’s picture

mtovey commented
StatusFileSize
new 0001-Adds-widget-object-reference-to-element.patch1.14 KB

Attaching a patch that changes the module js as @sic outlined earlier. This then allows subsequent js code with a reference to the HTML widget element to access the properties/methods from the MultipleWidget setup method. For example:

let widgetObject = jQuery('#autocomplete-deluxe-input').data('autocomplete_deluxe_widget');
let itemInit = {
label: 'Create a new tag: #Sample tag',
value: 'Sample tag',
newTerm: true
};
widgetObject.addValue(itemInit);

eadamse’s picture

eadamse commented
StatusFileSize
new adds-widget-object-reference-to-element-3061562-1.patch529 bytes

This is a re-roll of the patch from #6 for version ^2.1. You can utilize the exposed widget object using the jQuery `data` method as described there.

rajab natshah opened merge request !47

rajab natshah’s picture

rajab natshah
he/him
commented
Version: 2.0.x-dev » 2.1.x-dev
Assigned: Unassigned » rajab natshah
Category: Support request » Feature request
Issue summary: View changes
Status: Active » Needs review
StatusFileSize
new 3061562-add-from-javascript.png59.95 KB

Thank you, Sic for asking and David and Michael for keeping the thread alive.

There was nothing to call, because the behaviour created the widget and dropped the instance. The merge request keeps it in the jQuery data of the input, so this works:

jQuery('#autocomplete-deluxe-input').data('autocompleteDeluxe').addValue({ label: 'Drupal', value: 'Drupal (7)' });

Tested on Drupal 11.4: two values added that way show as tags, the hidden field reads the Label (id) pairs, and saving the node stores term IDs 7 and 9.

Two tags added from the console

To review, test, then merge.

  • rajab natshah committed 2dc4ac79 on 2.1.x 
    feat: #3061562 Keep the widget on the input so other code can reach it
rajab natshah’s picture

rajab natshah
he/him
commented
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: rajab natshah » Unassigned

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.