-
-
Notifications
You must be signed in to change notification settings - Fork 235
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Label groups ul multiarray #362
Comments
Everything you need can be found in old issues and questions, start at #118 |
I'm going through the same problem, did you solve anything? |
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
|
really, the click on the item corresponds to the internal order not the new order (visual order). internal order: visual order: issue related: #95 (comment) is not the best solution, but i order the data src by _categoty and it works
|
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
Can I draw such a conclusion? Or what kind of data array is needed for such a construction of results?
The text was updated successfully, but these errors were encountered: