Override creating html tags of items

[Sajjad-HTLO]

Hi, I want to display the results in a customized form.
I don't want to just declare the tag type in the resultItem attribute and it automatically creates and append each item to the result list tag.
Is it possible that I gain full control over the process of creating HTML tags and displaying them?

Now as a workaround, I can clear all the child nodes on the resultsList and append my own created tags with the given data, but I wonder if there is an enjoyable way for it.
Thanks.

[folknor]

No, that's not possible.

With resultItem.id, resultItem.tag, resultItem.class, resultItem.element, resultsList.element, resultsList.tag, resultsList.id, resultsList.class, resultsList.destination, resultsList.position, and custom CSS you should be able to make the HTML look however you want.

Please give us an example of what you want to achieve that isn't possible.

[Sajjad-HTLO]

I want to group the results by a category:

My try:

`
resultsList: {
tag: "span",
element: (list, data) => {
// Remove all (automatically-added) child nodes (items) - (How to stop adding these items?)
while (list.firstChild)
list.firstChild.remove();

      // Create main and 2 category partitions
      let mainDiv = createMainDiv();
      let articlesDiv = createArticlesDiv();
      let carsDiv = createCarsDiv();
      
      let articles = data.results[0].value;
      let cars = data.results[1].value;
      
      for (const item of articles)
          articlesDiv.appendChild(createItemDiv(item));
      for (const item of cars)
          companiesDiv.appendChild(createItemDiv(item));
      
      // Append to the main div
      list.prepend(mainDiv);
             },
	},

`
This is my favorite form:

Users:

Cars:

This is what I want to do.
Actually, I want to stop adding result items to the list dom here (in the resultsList), so I don't need to remove them first.

[folknor]

Okay the way I would do this is

let hasUsers = false
let hasCars = false

new autoComplete({
	data: {
		filter: list => {
			return list.sort((a, b) => {
				a.category.localeCompare(b.category) || a.name > b.name
			})
		}
	},
	resultItem: {
		element: (el, res) => {
			if ( res.category === "Users" && !hasUsers ) {
				hasUsers = true
				let cat = document.createElement(p)
				cat.innerHTML = "Users"
				el.prepend(cat)
			} else if ( res.category === "Cars" && !hasUsers ) {
				...
			}
		}
	},
	resultsList: {
		element: (element, data) => {
			// This is executed after every resultItem is rendered
			hasUsers = false
			hasCars = false
		},
	},
})

Hopefully that makes sense to you. And the code obviously hasn't been tested or optimized, it's just to demonstrate.

[Sajjad-HTLO]

Thank you for the response,
But there are still additional data in the result set, if I didn't perform el.prepend(...) s , I see some JSON objects when the dropdown opens:

I still have to remove them manually!

<li id="autoComplete_result_0" role="option">[object Object],[object Object],[object Object],[object Object],[object Object]</li>