use dataset instead of getattribute

for testing you can use

const div = document.createElement('div');
div.innerHTML = `<input 
  type="text" 
  data-autocomplete-input
  data-autocomplete='{"maxChars":3,"path":"http://path"}' 
  data-autocomplete-separator-char="," 
  data-autocomplete-auto-focus="true">`;
const input = div.querySelector('input');
document.body.append(div);

function attributesToOptions() {
  const options = {};
  // Any options provided in the `data-autocomplete` attribute will take
  // precedence over those specified in `data-autocomplete-(x)`.
  const dataAutocompleteAttributeOptions = input.getAttribute(
    'data-autocomplete',
  )
    ? JSON.parse(input.getAttribute('data-autocomplete'))
    : {};

  // Loop through all of the input's attributes. Any attributes beginning with
  // `data-autocomplete` will be added to an options object.
  for (let i = 0; i < input.attributes.length; i++) {
    if (
      input.attributes[i].nodeName.includes('data-autocomplete') &&
      input.attributes[i].nodeName !== 'data-autocomplete' &&
      // Unwanted side effect.
      input.attributes[i].nodeName !== 'data-autocomplete-input'
    ) {
      // Convert the data attribute name to camel case for use in the options
      // object.
      let optionName = input.attributes[i].nodeName
        .replace('data-autocomplete-', '')
        .split('-')
        .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
        .join('');
      optionName = optionName.charAt(0).toLowerCase() + optionName.slice(1);
      const value = input.attributes[i].nodeValue;
      if (['true', 'false'].includes(value)) {
        options[optionName] = value === 'true';
      } else {
        options[optionName] = value;
      }
    }
  }

  return { ...options, ...dataAutocompleteAttributeOptions };
}

in the browser console run this code and then execute attributesToOptions() to see the result of the transformation of the data attributes into an option object. Or you can add that code to a html file and open it might be easier than using the console all the time.

There are tests to check the behavior of this function so please update the merge request and make sure the tests are passing :)

a few details and it'll be ok to merge.

Need to change do the let -> const change in the for loop also

all good :)

Main change is that using dataset allow us to get rid of this piece of code:

        let optionName = this.input.attributes[i].nodeName
          .replace('data-autocomplete-', '')
          .split('-')
          .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
          .join('');

because with dataset this is done automatically by the browser.