altilunium/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JSON Document Retrieval</title>
  <style>
    body{
      font-family: Arial;
    }
    #result-container{
      margin-top:20px;
    }
    .i {
          font-size: 14px;
    padding: 8px 54px;
    }
    .i h1 {
      font-family: Arial;
    font-size: 19px;
    font-weight: 500;
    margin: 0px;
        padding-bottom: 2px;
    }
    .num {
      font-size:13px;
      color:grey;
    }
    .desc{
      margin-left: 28px;
    }
    #details {
      padding-left: 30px;
    margin-top: 16px;
    line-height: 19px;
}

  .prop{
    padding-right:30px;
  }


.ilink{
  color:blue;
}

#searchForm{
      margin-left: 53px;
    padding: 10px 5px;
}

#searchInput{
  padding: 7px 23px;
    font-size: 16px;
}

button{
  padding: 9px 15px;
      margin-left: 9px;
}

  </style>
</head>
<body>


 <div class="loading-overlay" id="loadingOverlay">
    <div class="loading-message">Loading...</div>
  </div>

  <form id="searchForm">
    <input type="text" id="searchInput" name="searchInput">
    <button type="submit">Submit</button>
  </form>

  <div id="resultContainer"></div>

  <script>


function searchNoninput(searchInput){
  // Create a new XMLHttpRequest object
      var xhr = new XMLHttpRequest();
      var zas = "https://m.wikidata.org/w/api.php?action=query&format=json&origin=*&formatversion=2&prop=pageprops%7Centityterms%7Cdescription&generator=wbsearch&ppprop=displaytitle&wbetterms=label&redirects=&gwbssearch="+encodeURIComponent(searchInput.id)+"&gwbslimit=15"

      zas = "https://www.wikidata.org/w/api.php?action=wbsearchentities&origin=*&search="+encodeURIComponent(searchInput)+"&format=json&errorformat=plaintext&language=en&limit=50&uselang=en&type=item"

      // Configure the request
      xhr.open('GET', zas);
      showLoadingOverlay();


      // Set the response type to JSON
      xhr.responseType = 'json';

      // Handle the response
      xhr.onload = function() {
        if (xhr.status === 200) {
          var jsonResponse = xhr.response;
          renderResult(jsonResponse);
          hideLoadingOverlay();
        } else {
          console.log('Error: ' + xhr.status);
          hideLoadingOverlay();
        }
      };

      // Send the request
      xhr.send();
}


function extractQIDFromWikidataURL(url) {
  // Check if the domain is wikidata.org
  const wikiDataDomain = 'www.wikidata.org';
  const urlObject = new URL(url);

  if (urlObject.hostname !== wikiDataDomain) {
    console.log(urlObject.hostname,wikiDataDomain)
    // URL domain is not wikidata.org
    return null;
  }

  // Extract the QID from the URL
  const pathParts = urlObject.pathname.split('/');
  const qidIndex = pathParts.indexOf('entity') + 1;

  if (qidIndex >= 0 && qidIndex < pathParts.length) {
    const qid = pathParts[qidIndex];
    return qid;
  }

  return null;
}

const loadingOverlay = document.getElementById('loadingOverlay');

    function showLoadingOverlay() {
      loadingOverlay.style.display = 'flex';
    }

    function hideLoadingOverlay() {
      loadingOverlay.style.display = 'none';
    }

    hideLoadingOverlay()


 function getItem2(t){


var xhrx = new XMLHttpRequest();


      zas = "https://www.wikidata.org/w/api.php?action=wbsearchentities&origin=*&search="+encodeURIComponent(t.id)+"&format=json&errorformat=plaintext&language=en&limit=50&uselang=en&type=item"

      // Configure the request
      xhrx.open('GET', zas);
      showLoadingOverlay();


      // Set the response type to JSON
      xhrx.responseType = 'json';

      // Handle the response
      xhrx.onload = function() {
        if (xhrx.status === 200) {
          var jsonResponse = xhrx.response;
          //console.log(jsonResponse)
          console.log(jsonResponse["search"][0]['display']['label']['value'], jsonResponse["search"][0]['title'], jsonResponse["search"][0]['display']['description']['value'])
          var a1 = document.getElementsByClassName("titl")
          for (let i = 0; i < a1.length; i++) {
              a1[i].innerHTML = jsonResponse["search"][0]['display']['label']['value']
            }
          a1 = document.getElementsByClassName("num")
          for (let i = 0; i < a1.length; i++) {
              a1[i].innerHTML = jsonResponse["search"][0]['title']
            }
          a1 = document.getElementsByClassName("desc")
          for (let i = 0; i < a1.length; i++) {
              a1[i].innerHTML = jsonResponse["search"][0]['display']['description']['value']
            }


var tt = document.getElementById("details")
tt.innerHTML = "Now loading..."


var sparqlQuery = `
          SELECT ?wdLabel ?ooLabel ?o
          WHERE {
            VALUES (?s) { (wd:${t.id}) }
            ?s ?wdt ?o .
            ?wd wikibase:directClaim ?wdt .
            ?wd rdfs:label ?wdLabel .
            OPTIONAL {
              ?o rdfs:label ?oLabel .
              FILTER (lang(?oLabel) = "en")
            }
            FILTER (lang(?wdLabel) = "en")
            BIND (COALESCE(?oLabel, ?o) AS ?ooLabel)
          }
          ORDER BY xsd:integer(STRAFTER(STR(?wd), "http://www.wikidata.org/entity/P"))`;

      var abc = encodeURIComponent(sparqlQuery)
      var uri = "https://query.wikidata.org/sparql?format=json&query=" + abc
      var xhr = new XMLHttpRequest();

      xhr.open('GET', uri);
      xhr.onload = function() {
        if (xhr.status === 200) {
          var jsonResponse = JSON.parse(xhr.response);
          console.log(jsonResponse)


            console.log(jsonResponse["results"])
            var rr = jsonResponse["results"]["bindings"]
            var zaString2 = "<table>"
            for (let i = 0; i < rr.length; i++) {
              if (rr[i]["o"]["type"] == "uri") {
                console.log(rr[i]["wdLabel"]["value"],rr[i]["ooLabel"]["value"],rr[i]["o"]["value"])
                console.log(rr[i]["o"]["value"],extractQIDFromWikidataURL(rr[i]["o"]["value"]))
                if (extractQIDFromWikidataURL(rr[i]["o"]["value"])) {
                  zaString2 = zaString2 + "<tr><td class='prop'>" + rr[i]["wdLabel"]["value"] + "</td>" + "<td class='ilink' id="+extractQIDFromWikidataURL(rr[i]["o"]["value"])+" onclick='getItem2(this)'>" + rr[i]["ooLabel"]["value"] + "</td></tr>"
                }
                else{
                zaString2 = zaString2 + "<tr><td class='prop'>" + rr[i]["wdLabel"]["value"] + "</td>" + "<td><a href='" + rr[i]["o"]["value"] + "'>" + rr[i]["ooLabel"]["value"] + "</a></td></tr>"
                }
              }
              else {
                console.log(rr[i]["wdLabel"]["value"],rr[i]["ooLabel"]["value"])
                zaString2 = zaString2 + "<tr><td class='prop'>" + rr[i]["wdLabel"]["value"] + "</td><td>" +  rr[i]["ooLabel"]["value"] + "</tr>"
              }

            }
            zaString2 = zaString2 + "</table>"


            tt.innerHTML = zaString2


          hideLoadingOverlay();
        } else {
          console.log('Error: ' + xhr.status);
          hideLoadingOverlay();
        }
      };

      // Send the request
      xhr.send();
      showLoadingOverlay();


          hideLoadingOverlay();
        } else {
          console.log('Error: ' + xhrx.status);
          hideLoadingOverlay();
        }
      };

      // Send the request
      xhrx.send();


    }


    function getItem(t){
      var elements = document.getElementsByClassName("i")
      var sea = document.getElementById("searchInput")
      sea.value = t.id


      for (let i = 0; i < elements.length; i++) {
          var element = elements[i];

          if (element.id == t.id) {
            element.style.display = ''; // Display the matching element

            const newElement = document.createElement('div');
            newElement.id = 'details';
            element.appendChild(newElement)


          } else {
            element.style.display = 'none'; // Hide non-matching elements

          }
        }


      console.log(t.id)

      var zas = "https://www.wikidata.org/wiki/Special:EntityData/" + t.id +".json"

      var sparqlQuery = `
          SELECT ?wdLabel ?ooLabel ?o
          WHERE {
            VALUES (?s) { (wd:${t.id}) }
            ?s ?wdt ?o .
            ?wd wikibase:directClaim ?wdt .
            ?wd rdfs:label ?wdLabel .
            OPTIONAL {
              ?o rdfs:label ?oLabel .
              FILTER (lang(?oLabel) = "en")
            }
            FILTER (lang(?wdLabel) = "en")
            BIND (COALESCE(?oLabel, ?o) AS ?ooLabel)
          }
          ORDER BY xsd:integer(STRAFTER(STR(?wd), "http://www.wikidata.org/entity/P"))`;

      var abc = encodeURIComponent(sparqlQuery)
      var uri = "https://query.wikidata.org/sparql?format=json&query=" + abc
      var xhr = new XMLHttpRequest();

      xhr.open('GET', uri);
      xhr.onload = function() {
        if (xhr.status === 200) {
          var jsonResponse = JSON.parse(xhr.response);
          console.log(jsonResponse)


            console.log(jsonResponse["results"])
            var rr = jsonResponse["results"]["bindings"]
            var zaString2 = "<table>"
            for (let i = 0; i < rr.length; i++) {
              if (rr[i]["o"]["type"] == "uri") {
                console.log(rr[i]["wdLabel"]["value"],rr[i]["ooLabel"]["value"],rr[i]["o"]["value"])
                console.log(rr[i]["o"]["value"],extractQIDFromWikidataURL(rr[i]["o"]["value"]))
                if (extractQIDFromWikidataURL(rr[i]["o"]["value"])) {
                  zaString2 = zaString2 + "<tr><td class='prop'>" + rr[i]["wdLabel"]["value"] + "</td>" + "<td class='ilink' id="+extractQIDFromWikidataURL(rr[i]["o"]["value"])+" onclick='getItem2(this)'>" + rr[i]["ooLabel"]["value"] + "</td></tr>"
                }
                else{
                zaString2 = zaString2 + "<tr><td class='prop'>" + rr[i]["wdLabel"]["value"] + "</td>" + "<td><a href='" + rr[i]["o"]["value"] + "'>" + rr[i]["ooLabel"]["value"] + "</a></td></tr>"
                }
              }
              else {
                console.log(rr[i]["wdLabel"]["value"],rr[i]["ooLabel"]["value"])
                zaString2 = zaString2 + "<tr><td class='prop'>" + rr[i]["wdLabel"]["value"] + "</td><td>" +  rr[i]["ooLabel"]["value"] + "</tr>"
              }

            }
            zaString2 = zaString2 + "</table>"

            var tt = document.getElementById("details")
            tt.innerHTML = zaString2


          hideLoadingOverlay();
        } else {
          console.log('Error: ' + xhr.status);
          hideLoadingOverlay();
        }
      };

      // Send the request
      xhr.send();
      showLoadingOverlay();

      t.onclick = ""

    }


    document.getElementById('searchForm').addEventListener('submit', function(event) {
      event.preventDefault(); // Prevent form submission

      var searchInput = document.getElementById('searchInput').value;

      // Create a new XMLHttpRequest object
      var xhr = new XMLHttpRequest();
      var zas = "https://m.wikidata.org/w/api.php?action=query&format=json&origin=*&formatversion=2&prop=pageprops%7Centityterms%7Cdescription&generator=wbsearch&ppprop=displaytitle&wbetterms=label&redirects=&gwbssearch="+encodeURIComponent(searchInput)+"&gwbslimit=15"

      zas = "https://www.wikidata.org/w/api.php?action=wbsearchentities&origin=*&search="+encodeURIComponent(searchInput)+"&format=json&errorformat=plaintext&language=en&limit=50&uselang=en&type=item"

      // Configure the request
      xhr.open('GET', zas);
      showLoadingOverlay();


      // Set the response type to JSON
      xhr.responseType = 'json';

      // Handle the response
      xhr.onload = function() {
        if (xhr.status === 200) {
          var jsonResponse = xhr.response;
          renderResult(jsonResponse);
          hideLoadingOverlay();
        } else {
          console.log('Error: ' + xhr.status);
          hideLoadingOverlay();
        }
      };

      // Send the request
      xhr.send();
    });

    function renderResult(jsonResponse) {
      console.log(jsonResponse)
      var resultContainer = document.getElementById('resultContainer');
      //resultContainer.innerHTML = JSON.stringify(jsonResponse, null, 2);
      var zaString =""


      var rr = jsonResponse["search"]
      for (let i = 0; i < rr.length; i++) {
        zaString = zaString + "<div onclick='getItem(this)' class='i' id='"+rr[i]['title'] +"''>"
        zaString = zaString +  "<h1>📄  <span class='titl'>" + rr[i]['display']['label']['value'] + "</span> <span class='num'>"+ rr[i]['title'] +  "</span></h1>"
        try {
              zaString = zaString +"<span class='desc'>" + rr[i]['display']['description']['value'] + "</span><br>"
        } catch (error) {

        }
        zaString = zaString + "</div>"


      }
      resultContainer.innerHTML = zaString

    }


  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>JSON Document Retrieval</title>
	<style>
	body{
	font-family: Arial;
	}
	#result-container{
	margin-top:20px;
	}
	.i {
	font-size: 14px;
	padding: 8px 54px;
	}
	.i h1 {
	font-family: Arial;
	font-size: 19px;
	font-weight: 500;
	margin: 0px;
	padding-bottom: 2px;
	}
	.num {
	font-size:13px;
	color:grey;
	}
	.desc{
	margin-left: 28px;
	}
	#details {
	padding-left: 30px;
	margin-top: 16px;
	line-height: 19px;
	}

	.prop{
	padding-right:30px;
	}


	.ilink{
	color:blue;
	}

	#searchForm{
	margin-left: 53px;
	padding: 10px 5px;
	}

	#searchInput{
	padding: 7px 23px;
	font-size: 16px;
	}

	button{
	padding: 9px 15px;
	margin-left: 9px;
	}

	</style>
	</head>
	<body>



	<div class="loading-overlay" id="loadingOverlay">
	<div class="loading-message">Loading...</div>
	</div>

	<form id="searchForm">
	<input type="text" id="searchInput" name="searchInput">
	<button type="submit">Submit</button>
	</form>

	<div id="resultContainer"></div>

	<script>


	function searchNoninput(searchInput){
	// Create a new XMLHttpRequest object
	var xhr = new XMLHttpRequest();
	var zas = "https://m.wikidata.org/w/api.php?action=query&format=json&origin=*&formatversion=2&prop=pageprops%7Centityterms%7Cdescription&generator=wbsearch&ppprop=displaytitle&wbetterms=label&redirects=&gwbssearch="+encodeURIComponent(searchInput.id)+"&gwbslimit=15"

	zas = "https://www.wikidata.org/w/api.php?action=wbsearchentities&origin=*&search="+encodeURIComponent(searchInput)+"&format=json&errorformat=plaintext&language=en&limit=50&uselang=en&type=item"

	// Configure the request
	xhr.open('GET', zas);
	showLoadingOverlay();



	// Set the response type to JSON
	xhr.responseType = 'json';

	// Handle the response
	xhr.onload = function() {
	if (xhr.status === 200) {
	var jsonResponse = xhr.response;
	renderResult(jsonResponse);
	hideLoadingOverlay();
	} else {
	console.log('Error: ' + xhr.status);
	hideLoadingOverlay();
	}
	};

	// Send the request
	xhr.send();
	}



	function extractQIDFromWikidataURL(url) {
	// Check if the domain is wikidata.org
	const wikiDataDomain = 'www.wikidata.org';
	const urlObject = new URL(url);

	if (urlObject.hostname !== wikiDataDomain) {
	console.log(urlObject.hostname,wikiDataDomain)
	// URL domain is not wikidata.org
	return null;
	}

	// Extract the QID from the URL
	const pathParts = urlObject.pathname.split('/');
	const qidIndex = pathParts.indexOf('entity') + 1;

	if (qidIndex >= 0 && qidIndex < pathParts.length) {
	const qid = pathParts[qidIndex];
	return qid;
	}

	return null;
	}

	const loadingOverlay = document.getElementById('loadingOverlay');

	function showLoadingOverlay() {
	loadingOverlay.style.display = 'flex';
	}

	function hideLoadingOverlay() {
	loadingOverlay.style.display = 'none';
	}

	hideLoadingOverlay()




	function getItem2(t){



	var xhrx = new XMLHttpRequest();


	zas = "https://www.wikidata.org/w/api.php?action=wbsearchentities&origin=*&search="+encodeURIComponent(t.id)+"&format=json&errorformat=plaintext&language=en&limit=50&uselang=en&type=item"

	// Configure the request
	xhrx.open('GET', zas);
	showLoadingOverlay();



	// Set the response type to JSON
	xhrx.responseType = 'json';

	// Handle the response
	xhrx.onload = function() {
	if (xhrx.status === 200) {
	var jsonResponse = xhrx.response;
	//console.log(jsonResponse)
	console.log(jsonResponse["search"][0]['display']['label']['value'], jsonResponse["search"][0]['title'], jsonResponse["search"][0]['display']['description']['value'])
	var a1 = document.getElementsByClassName("titl")
	for (let i = 0; i < a1.length; i++) {
	a1[i].innerHTML = jsonResponse["search"][0]['display']['label']['value']
	}
	a1 = document.getElementsByClassName("num")
	for (let i = 0; i < a1.length; i++) {
	a1[i].innerHTML = jsonResponse["search"][0]['title']
	}
	a1 = document.getElementsByClassName("desc")
	for (let i = 0; i < a1.length; i++) {
	a1[i].innerHTML = jsonResponse["search"][0]['display']['description']['value']
	}



	var tt = document.getElementById("details")
	tt.innerHTML = "Now loading..."


	var sparqlQuery = `
	SELECT ?wdLabel ?ooLabel ?o
	WHERE {
	VALUES (?s) { (wd:${t.id}) }
	?s ?wdt ?o .
	?wd wikibase:directClaim ?wdt .
	?wd rdfs:label ?wdLabel .
	OPTIONAL {
	?o rdfs:label ?oLabel .
	FILTER (lang(?oLabel) = "en")
	}
	FILTER (lang(?wdLabel) = "en")
	BIND (COALESCE(?oLabel, ?o) AS ?ooLabel)
	}
	ORDER BY xsd:integer(STRAFTER(STR(?wd), "http://www.wikidata.org/entity/P"))`;

	var abc = encodeURIComponent(sparqlQuery)
	var uri = "https://query.wikidata.org/sparql?format=json&query=" + abc
	var xhr = new XMLHttpRequest();

	xhr.open('GET', uri);
	xhr.onload = function() {
	if (xhr.status === 200) {
	var jsonResponse = JSON.parse(xhr.response);
	console.log(jsonResponse)


	console.log(jsonResponse["results"])
	var rr = jsonResponse["results"]["bindings"]
	var zaString2 = "<table>"
	for (let i = 0; i < rr.length; i++) {
	if (rr[i]["o"]["type"] == "uri") {
	console.log(rr[i]["wdLabel"]["value"],rr[i]["ooLabel"]["value"],rr[i]["o"]["value"])
	console.log(rr[i]["o"]["value"],extractQIDFromWikidataURL(rr[i]["o"]["value"]))
	if (extractQIDFromWikidataURL(rr[i]["o"]["value"])) {
	zaString2 = zaString2 + "<tr><td class='prop'>" + rr[i]["wdLabel"]["value"] + "</td>" + "<td class='ilink' id="+extractQIDFromWikidataURL(rr[i]["o"]["value"])+" onclick='getItem2(this)'>" + rr[i]["ooLabel"]["value"] + "</td></tr>"
	}
	else{
	zaString2 = zaString2 + "<tr><td class='prop'>" + rr[i]["wdLabel"]["value"] + "</td>" + "<td><a href='" + rr[i]["o"]["value"] + "'>" + rr[i]["ooLabel"]["value"] + "</a></td></tr>"
	}
	}
	else {
	console.log(rr[i]["wdLabel"]["value"],rr[i]["ooLabel"]["value"])
	zaString2 = zaString2 + "<tr><td class='prop'>" + rr[i]["wdLabel"]["value"] + "</td><td>" + rr[i]["ooLabel"]["value"] + "</tr>"
	}

	}
	zaString2 = zaString2 + "</table>"


	tt.innerHTML = zaString2


	hideLoadingOverlay();
	} else {
	console.log('Error: ' + xhr.status);
	hideLoadingOverlay();
	}
	};

	// Send the request
	xhr.send();
	showLoadingOverlay();





	hideLoadingOverlay();
	} else {
	console.log('Error: ' + xhrx.status);
	hideLoadingOverlay();
	}
	};

	// Send the request
	xhrx.send();









	}


	function getItem(t){
	var elements = document.getElementsByClassName("i")
	var sea = document.getElementById("searchInput")
	sea.value = t.id


	for (let i = 0; i < elements.length; i++) {
	var element = elements[i];

	if (element.id == t.id) {
	element.style.display = ''; // Display the matching element

	const newElement = document.createElement('div');
	newElement.id = 'details';
	element.appendChild(newElement)


	} else {
	element.style.display = 'none'; // Hide non-matching elements

	}
	}





	console.log(t.id)

	var zas = "https://www.wikidata.org/wiki/Special:EntityData/" + t.id +".json"

	var sparqlQuery = `
	SELECT ?wdLabel ?ooLabel ?o
	WHERE {
	VALUES (?s) { (wd:${t.id}) }
	?s ?wdt ?o .
	?wd wikibase:directClaim ?wdt .
	?wd rdfs:label ?wdLabel .
	OPTIONAL {
	?o rdfs:label ?oLabel .
	FILTER (lang(?oLabel) = "en")
	}
	FILTER (lang(?wdLabel) = "en")
	BIND (COALESCE(?oLabel, ?o) AS ?ooLabel)
	}
	ORDER BY xsd:integer(STRAFTER(STR(?wd), "http://www.wikidata.org/entity/P"))`;

	var abc = encodeURIComponent(sparqlQuery)
	var uri = "https://query.wikidata.org/sparql?format=json&query=" + abc
	var xhr = new XMLHttpRequest();

	xhr.open('GET', uri);
	xhr.onload = function() {
	if (xhr.status === 200) {
	var jsonResponse = JSON.parse(xhr.response);
	console.log(jsonResponse)


	console.log(jsonResponse["results"])
	var rr = jsonResponse["results"]["bindings"]
	var zaString2 = "<table>"
	for (let i = 0; i < rr.length; i++) {
	if (rr[i]["o"]["type"] == "uri") {
	console.log(rr[i]["wdLabel"]["value"],rr[i]["ooLabel"]["value"],rr[i]["o"]["value"])
	console.log(rr[i]["o"]["value"],extractQIDFromWikidataURL(rr[i]["o"]["value"]))
	if (extractQIDFromWikidataURL(rr[i]["o"]["value"])) {
	zaString2 = zaString2 + "<tr><td class='prop'>" + rr[i]["wdLabel"]["value"] + "</td>" + "<td class='ilink' id="+extractQIDFromWikidataURL(rr[i]["o"]["value"])+" onclick='getItem2(this)'>" + rr[i]["ooLabel"]["value"] + "</td></tr>"
	}
	else{
	zaString2 = zaString2 + "<tr><td class='prop'>" + rr[i]["wdLabel"]["value"] + "</td>" + "<td><a href='" + rr[i]["o"]["value"] + "'>" + rr[i]["ooLabel"]["value"] + "</a></td></tr>"
	}
	}
	else {
	console.log(rr[i]["wdLabel"]["value"],rr[i]["ooLabel"]["value"])
	zaString2 = zaString2 + "<tr><td class='prop'>" + rr[i]["wdLabel"]["value"] + "</td><td>" + rr[i]["ooLabel"]["value"] + "</tr>"
	}

	}
	zaString2 = zaString2 + "</table>"

	var tt = document.getElementById("details")
	tt.innerHTML = zaString2


	hideLoadingOverlay();
	} else {
	console.log('Error: ' + xhr.status);
	hideLoadingOverlay();
	}
	};

	// Send the request
	xhr.send();
	showLoadingOverlay();

	t.onclick = ""

	}


























	document.getElementById('searchForm').addEventListener('submit', function(event) {
	event.preventDefault(); // Prevent form submission

	var searchInput = document.getElementById('searchInput').value;

	// Create a new XMLHttpRequest object
	var xhr = new XMLHttpRequest();
	var zas = "https://m.wikidata.org/w/api.php?action=query&format=json&origin=*&formatversion=2&prop=pageprops%7Centityterms%7Cdescription&generator=wbsearch&ppprop=displaytitle&wbetterms=label&redirects=&gwbssearch="+encodeURIComponent(searchInput)+"&gwbslimit=15"

	zas = "https://www.wikidata.org/w/api.php?action=wbsearchentities&origin=*&search="+encodeURIComponent(searchInput)+"&format=json&errorformat=plaintext&language=en&limit=50&uselang=en&type=item"

	// Configure the request
	xhr.open('GET', zas);
	showLoadingOverlay();



	// Set the response type to JSON
	xhr.responseType = 'json';

	// Handle the response
	xhr.onload = function() {
	if (xhr.status === 200) {
	var jsonResponse = xhr.response;
	renderResult(jsonResponse);
	hideLoadingOverlay();
	} else {
	console.log('Error: ' + xhr.status);
	hideLoadingOverlay();
	}
	};

	// Send the request
	xhr.send();
	});

	function renderResult(jsonResponse) {
	console.log(jsonResponse)
	var resultContainer = document.getElementById('resultContainer');
	//resultContainer.innerHTML = JSON.stringify(jsonResponse, null, 2);
	var zaString =""


	var rr = jsonResponse["search"]
	for (let i = 0; i < rr.length; i++) {
	zaString = zaString + "<div onclick='getItem(this)' class='i' id='"+rr[i]['title'] +"''>"
	zaString = zaString + "<h1>📄 <span class='titl'>" + rr[i]['display']['label']['value'] + "</span> <span class='num'>"+ rr[i]['title'] + "</span></h1>"
	try {
	zaString = zaString +"<span class='desc'>" + rr[i]['display']['description']['value'] + "</span><br>"
	} catch (error) {

	}
	zaString = zaString + "</div>"


	}
	resultContainer.innerHTML = zaString

	}



	</script>
	</body>
	</html>