Label groups ul multiarray

[Dezmonter]

Thanks for the wonderful library! I have a couple of questions, the answers to which I did not find in the documentation

I have json array

        data: {
            src: [
                  {
                      "products": [
                          {
                              "id": 80,
                              "name": "Apple Iphone",
                              "route": 1
                          },
                          {
                              "id": "80",
                              "name": "Apple Iphone2",
                              "route": "route('home')"
                          },
                      ],
                      "categories": [
                          {
                              "id": 276,
                              "name": "Phones",
                              "route": 1
                          },
                      ],
                      "articles": [
                          {
                              "id": 9,
                              "name": "Article phone",
                              "route": 1
                          },
                      ],
                  }
            ],

            cache: true,
        },

Can I draw such a conclusion? Or what kind of data array is needed for such a construction of results?

[folknor]

Everything you need can be found in old issues and questions, start at https://github.com/TarekRaafat/autoComplete.js/issues/118

[rlidev]

I'm going through the same problem, did you solve anything?

[someson]

1. normalizeyour payload to adjust the schema by adding a corresponding category key:

{
    "id": 80,
    "name": "Apple Iphone",
    "route": 1,
    "_category": "Products", // <--- this one
},
...
{
    "id": 9,
    "name": "Article phone",
    "route": 1,
    "_category": "Articles", // <--- this one
},

2. we need to adjust the container to be like

<div id="autoComplete_list" role="listbox" class="category_list">
    <header>categoryName</header>
    <ul data-category="categoryName">
        <li id="autoComplete_result_0" role="option" class="item" data-category="categoryName">...</li>
        <li id="autoComplete_result_1" role="option" class="item" data-category="categoryName">...</li>
        ...
    </ul>
    <header>categoryName2</header>
    <ul data-category="categoryName2">
        <li id="autoComplete_result_XX" role="option" class="item" data-category="categoryName2">...</li>
        <li id="autoComplete_result_XY" role="option" class="item" data-category="categoryName2">...</li>
        ...
    </ul>
    ...
</div>

by adjusting the configuration:

resultsList: {
    tag: "div",  // <-- important
    id: "autoComplete_list",
    class: "category_list",  // <-- important
    noResults: true,
    element: (list, data) => {
        let categories = {};
        [...list.children].forEach(item => {
            if ('category' in item.dataset) {
                let category = item.dataset.category;
                if (! (category in categories)) {
                    categories[category] = document.createElement("ul");
                    categories[category].dataset.category = category;
                }
                categories[category].appendChild(item);
            }
        });
        Object.keys(categories).forEach(category => {
            const categoryHead = document.createElement("header");
            categoryHead.innerText = category;
            list.appendChild(categoryHead);
            list.appendChild(categories[category]);
        });
    },
},

3. adjust resultItem config:

 resultItem: {
    tag: "li",
    element: (item, data) => {
        if ('_category' in data.value) {
            item.dataset.category = data.value['_category'];
        }
...

4. css update:

• override/replace all entries like .autoComplete_wrapper > ul and .autoComplete_wrapper > ul > by .autoComplete_wrapper .category_list
• style header tag

[novakand]

Hi all. I reproduced this code, everything works. But when selecting an element, it does not return the selected element correctly (If you select the last one from the list) Can someone help me what to do?

https://codepen.io/novakand/pen/RwvojMa

[ferthus]

really, the click on the item corresponds to the internal order not the new order (visual order).

internal order: [0]: "VK Stadium" "Record" [1]: "VK GIPSY" "Record" [2]: "Vnukovon lentoasema" "Record"

[4]: "VK Play" "Record"

visual order: [0]: "VK Stadium" "Record" [1]: "VK GIPSY" "Record"

[4]: "VK Play" "Record" [2]: "Vnukovon lentoasema" "Record"

issue related: https://github.com/TarekRaafat/autoComplete.js/issues/95#issuecomment-830598444

is not the best solution, but i order the data src by _categoty and it works

{ value: "ChIJo9kpFTVItUYRHKtfMOmHzmQ", text: "VK Stadium", place: { text: "VK Stadium", placeId: "ChIJo9kpFTVItUYRHKtfMOmHzmQ", type: "district", iata: false }, _category: "District" }, { value: "ChIJZVTvDKpLtUYRV4uUqPmL_JA", text: "VK GIPSY", place: { text: "VK GIPSY", placeId: "ChIJZVTvDKpLtUYRV4uUqPmL_JA", type: "district", iata: false }, _category: "District" }, { value: "ChIJJ4mRwrhJtUYRb_Lsi0VfL4Y", text: "VKO", place: { text: "VKO", placeId: "ChIJJ4mRwrhJtUYRb_Lsi0VfL4Y", type: "District", iata: false }, _category: "District" }, { value: "ChIJw_bHfTA2tUYRKf4ejS6VtDU", text: "VK Play", place: { text: "VK Play", placeId: "ChIJw_bHfTA2tUYRKf4ejS6VtDU", type: "district", iata: false }, _category: "District" }, { value: "ChIJc_siRKhWtUYRhxc_ze0X1-s", text: "Vnukovon lentoasema", place: { text: "Vnukovon lentoasema", placeId: "ChIJc_siRKhWtUYRhxc_ze0X1-s", type: "airport" }, _category: "Airport" }