Can use json data array?

[Pavel222k]

Using an array of data from a json file by format

[
  {"name": "title_1","urlink":"link_1"},
  { "name": "title_2","urlink":"link_2" }
]

is it possible to use your script so that the result is displayed

<a href="link_1"><span>title_1</span></a>
<a href="link_2"><span>title_2</span></a>

tried multiple options result all the time

<a href=""><span>title_1</span></a>
<a href=""><span>link_1</span></a>
<a href=""><span>title_2</span></a>

[TarekRaafat]

Hello @Pavel222k,

That's possible through using .parentNode.insertBefore() to insert the span inside the href but I would suggest using the onSelection API method instead as shown below:

onSelection: (dataFeedback) => {
  // Prepare the link URL
  const url = dataFeedback.selection.value.urlink;
  // Navigate to the selected item URL
  window.location.href = url;
};

Try it and let me know how it goes.

[Pavel222k]

I don't quite understand how this API works. It is required to display via data.key and name and urlink, or just the name parameter.
does not see selection.value.urlink and therefore does not output. I'm probably using it wrong somehow.

    new autoComplete({
        selector: "#search-post",
  	data: {
  		src: async () => {
  			const source = await fetch("https://url.com/FILE.json");
  			const data = await source.json();
  			return data;
  		},
  		key: ["name", "urlink"]
  	},
        resultsList: {
  		element: "span",
  		idName: "searсh_result",
            noResults: (list, query) => {
                const message = document.createElement("div");
                message.setAttribute("class", "aa-empty");
                message.innerHTML = `Not Found`;
                list.appendChild(message);
            },
        },
  	resultItem: {
  		element: "div",
  		highlight: {
  			render: true
  		},
  		onSelection: (dataFeedback) => {
  			const url = dataFeedback.selection.value.urlink;
  			window.location.href = url;
  		},
  		content: (data, element) => {
  			element.className = "aa-suggestion";
  			element.innerHTML = `<a href="" data-pjax><span>${data.match}</span></a>`;
  		}
  	}
  });

File json
[ {"name": "First Page","urlink":"/page/aloha" }, {"name": "Second Page","urlink":"/page/hello" }, {"name": "Third Page","urlink":"/page/bye" } ]

[TarekRaafat]

I have updated your code to the below by moving onSelection outside resultsItem and removing the href tags from the item tag since it's unneeded.

Please try and let me how it goes.

new autoComplete({
  selector: "#search-post",
  data: {
    src: async () => {
      const source = await fetch("https://url.com/FILE.json");
      const data = await source.json();
      return data;
    },
    key: ["name"],
  },
  resultsList: {
    element: "span",
    idName: "searсh_result",
    noResults: (list, query) => {
      const message = document.createElement("div");
      message.setAttribute("class", "aa-empty");
      message.innerHTML = `Not Found`;
      list.appendChild(message);
    },
  },
  resultItem: {
    element: "div",
    highlight: {
      render: true,
    },
    content: (data, element) => {
      element.className = "aa-suggestion";
      element.innerHTML = data.match;
    },
  },
  onSelection: (dataFeedback) => {
    // Prepare the link URL
    const url = dataFeedback.selection.value.urlink;
    // Navigate to the selected item URL
    window.location.href = url;
  };
});

[Pavel222k]

Oh, thanks a lot. Everything worked.