Hi! Looks like problem exist with 'click' event handling.

116        let dataLabel = e.target.getAttribute('data-label');
117        let dataValue = e.target.getAttribute('data-value');

Then you click on highlighted text in drop-down menu target has not button element but <span class=""text-primary"..> which does not have such attributes.

I solved this issue for myself by using currentTarget

116        let dataLabel = e.currentTarget.getAttribute('data-label');
117        let dataValue = e.currentTarget.getAttribute('data-value');

but im not sure if it best solution (cause i'm not js developer) :) So I don't make pool request.

p/s also i add possibility to autocomplete more than one word (but it is 'duck' code, which replaces last entrance of 'lookup' variable, not whole input value - better solution to replace text before coursor position)

Is there any better option to use JSON to recive data from other file ?

const ac = new Autocomplete(field, { onInput: function () { dane=AJAX();ac.setData(dane);
},data:[{label: "Text formatu JSON", value: 42}], .....

Hi

I think it would be nice to use the arrow keys to select a suggestion. This patch will set the focus to the first item in the dropdown when pressing the down arrow.

Let me know what you think of such behavior

Greetings CBke

hi team,

can´t setData with a varible. get the error:

this is what my dataset is:

and this is what my function does: function gotData(arrayOfRows){

  listOfRCCs = [];
  arrayOfRows = JSON.parse(arrayOfRows);

  for (let i = 0; i < arrayOfRows.length; i++) {
      listOfRCCs.push( [{"label": arrayOfRows[i][6], "value": arrayOfRows[i][1]}]);
  };

  const list = document.getElementById('rccCat');
  const ac = new Autocomplete(list, {
      data: [listOfRCCs],
      maximumItems: 5,
      treshold: 2,
      onSelectItem: ({label, value}) => {
          console.log("user selected:", label, value);
      }
  });      

  console.log(ac);
}

any help would be very much appreciated!!!!! cheers tomek

First off, amazing library!

Just a small nitpick but I think the "treshold" option should be renamed to the lexically correct "threshold".

To get it to work for searchs with accented characters and accented items, you can add:

const removeDiacritics = function(str) { return str .normalize('NFD') .replace(/[\u0300-\u036f]/g, '') }

and apply this in lines doing searches using indexOf such as

const idx = removeDiacritics(item.label).toLowerCase().indexOf(removeDiacritics(lookup).toLowerCase());

and

if (removeDiacritics(item.label).toLowerCase().indexOf(removeDiacritics(lookup).toLowerCase()) >= 0) { items.appendChild(this.createItem(lookup, item)); if (this.options.maximumItems > 0 && ++count >= this.options.maximumItems) break; }

You can now set the names of the label and value keys in the options. They default to label and value to not break the current behavior, but you can also set them to null, so that you can use a simple object instead of an array of objects, just like in bootstrap-4-autocomplete.

Examples:

const ac = new Autocomplete(field, {
    data: [{name: "entry1", text: "The first entry"}, {name: "entry2", text: "The second entry"}],
    label: "name",
    value: "text",
    onSelectItem: ({label, value}) => {
        console.log("user selected:", label, value);
    }
});



const ac = new Autocomplete(field, {
    data: {entry1: "The first entry", entry2: "The second entry"},
    label: null,
    value: null,
    onSelectItem: ({label, value}) => {
        console.log("user selected:", label, value);
    }
});

The navigation keys did not work in the dropdown with the following exception:

bootstrap.esm.js?7b17:2393 Uncaught TypeError: Cannot read property '_selectMenuItem' of null
    at HTMLDivElement.dataApiKeydownHandler (bootstrap.esm.js?7b17:2393)
    at HTMLDocument.handler (bootstrap.esm.js?7b17:460)

The reason is that the data-toggle-field changed from data-toggle to data-bs-toggle in bootstrap 5.

Hi

If the data changed, the autocomplete should be rendered again. So the matches will look in the new provided data and display accordingly.

Greetings CBke

There is an error in line 99 that cause not returning value when onSelectItem.

The code in line 99 "value: e.target.value" must be "value: e.target.dataset.value".

When choosing the value, I am using onSelectItem to apply the value to a hidden field. The problem is that the label has a double quote in it and it breaks the HTML by chunking the label.

How can I escape the label value before it is applied to the input?

I am having a "Uncaught SyntaxError: Cannot use import statement outside a module (at autocomplete.js:1:1)" error.

When I include type="module" to the script tag, then I get an "Uncaught ReferenceError: Autocomplete is not defined" error

Hi, Is there a way to refresh the autocomplete options once the list is loaded. For example, I am using a dropdown next to the search bar. Based on the selection in the dropdown, the results in the autocomplete should get filtered. However, if I fire the Autocomplete event every time a value is selected, it creates a new dropdown list based on the different datasource. Any suggestions to refresh or destroy the existing autocomplete dropdown to repopulate with freshdata?

I use the following code:

<div class="input-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"></button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button" value="1">1</button>
    <li><button class="dropdown-item" type="button" value="2">2</button>
    <li><button class="dropdown-item" type="button" value="3">3</button>
  </ul>
  <input class="form-control" name="s" id="autocomplete" type="text" placeholder="Search" autofocus>
</div>

But it's not working, because there is another dropdown next to the autocomplete inside the input group, so instead of showing the autocomplete dropdown on typing, the other dropdown will be shown.

Is there a way to fix this problem? Thank you very much!

Hi. How are you. Nice code but sometimes it returns null my code:

async function getProductsArray() {

  let autoCompleteArray = [];

  try {

    const [productsArray, productsDefault] = await getSettingsProducts();
    productsArray.sort();
    productsArray.forEach((element, index) => {
      autoCompleteArray.push({
        label: element,
        value: element
      });

    });
  
    const field = document.getElementById('productsAutoComplete');
    const ac = new Autocomplete(field, {
        //data: [{label: "I'm a label", value: 42}],
        data: autoCompleteArray,
        maximumItems: 5,
        threshold: 1,
        onSelectItem: ({
            label,
            value
        }) => {
            console.log("user selected:", label, value);//<--------sometimes null null
            document.getElementById('productsAutoComplete').value = "";
        inputVal(label);
        }
    });

  } catch (error) {
    console.log("Get Products Error: ", error);
    // errorInfo(error)
  }
}

It looks like it works, but not always. Sometimes "onSelectItem" returns "null"(about 25%). Even if the same element is clicked. I checked on chrome and Firefox. On Chrome, a bit better.