TarekRaafat / autoComplete.js

Simple autocomplete pure vanilla Javascript library.
https://tarekraafat.github.io/autoComplete.js
Apache License 2.0
3.93k stars 236 forks source link

keys attribute does not working on array of object data #430

Closed mgcodeur closed 2 months ago

mgcodeur commented 2 months ago

Hello everyone!

keys attribute does not working on array of object

I did exactly what is written in the documentation, but it doesn't work.

const autoCompleteJS = new autoComplete({
    data: {
      cache: true,
      key: ['name'], // it not working
      src: async query => {
        const source = await fetch(`./assets/js/fake-datas.json`);
        const {data} = await source.json();
        return data;
      },
    },
    debounce: 300,
    events: {
      input: {
        selection: event => {
          const selection = event.detail.selection.value;
          autoCompleteJS.input.value = selection.name;
          window.location.href = selection.link;
        },
      },
    },
    resultItem: {
      element: (item, data) => {
        const link = document.createElement('a');
        link.href = data.value.link;
        link.innerHTML = `<div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
              <img src="${data.value.image}" alt="${data.value.name}" class="img-fluid" width="50" height="50" object-fit="cover" />
              <div class="ms-2">
                ${item.innerHTML}
              </div>
            </div>
            <div class="text-muted">
              <i class="bi bi-arrow-right"></i>
            </div>
          </div>
        `;
        item.innerHTML = '';
        item.appendChild(link);
      },
      highlight: true,
    },
    resultsList: {
      destination: '#search-autocomplete',
      maxResults: 5,
    },
    wrapper: false,
  });

but when i provide simple array of string it work

@TarekRaafat

mgcodeur commented 2 months ago

Sorry, I found what was wrong; it was 'keys' with an 's', not 'key'.

I love this package, thanks 🚀🚀