b0tting/bgg_xml_api_demo.html

## bgg_xml_api_demo.html
<html>
    <head>
        <title>Board game geek search demo</title>
    </head>
<body>
<script>

</script>

    <h1>Board game geek search demo</h1>
    <form action="#" method="get">
        <div>
            <label for="bggSearchBar">Board game name:</label>
            <input type="text" name="name" id="bggSearchBar" placeholder="Type some words"/>
        </div>
        <div>
             <label for="bggId">BoardGameGeek ID:</label>
            <input type="bggId" id="bggId"> <span id="bggMoreInfo"></span>
        </div>
    </form>
    <div id="results"></div>
    <script>
        const MAX_LENGTH=10;
        const BASE_BGG_XML_API_URL = 'https://www.boardgamegeek.com/xmlapi2/search?type=boardgame&query=';
        let timeout_id;

        function searchBgg() {
            let search = bggSearchBar.value;
            let url =  BASE_BGG_XML_API_URL + search;
            let parser = new DOMParser();

            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.text();
                })
                .then(response => {
                    let xmlDoc = parser.parseFromString(response, "text/xml");
                    let items_total = xmlDoc.getElementsByTagName('items')[0].getAttribute('total');
                    let items = xmlDoc.getElementsByTagName('item');
                    let results = document.getElementById('results');
                    results.innerHTML = '';
                    for (let i = 0; i < items.length && i < MAX_LENGTH; i++) {
                        let item = items[i];
                        let name = item.getElementsByTagName('name')[0].getAttribute('value');
                        let year = item.getElementsByTagName('yearpublished')[0].getAttribute('value');
                        let id = item.getAttribute('id');
                        let div = document.createElement('div');
                        div.innerHTML = name + ' (' + year + ') <a href="#" onclick="selectId('+ id +', \''+ name +'\')">Select</a> <a href="https://boardgamegeek.com/boardgame/' + id + '" target="_blank">More info</a>';
                        if (items_total > MAX_LENGTH && i === MAX_LENGTH - 1) {
                            div.innerHTML += '<br>Too many results, showing only the first ' + MAX_LENGTH + ' results. Please refine your search.<br>';
                        }
                        results.appendChild(div);
                    }
                })
                .catch(error => {
                    console.error('There was a problem with the fetch operation:', error);
                });
        }

        function selectId(id, name) {
            document.getElementById('bggId').value = id;
            document.getElementById('bggMoreInfo').innerHTML = '<a href="https://boardgamegeek.com/boardgame/' + id + '" target="_blank">More info</a>';
            document.getElementById('bggSearchBar').value = name;
            document.getElementById('results').innerHTML = '';
        }

        // This function waits for the user to stop typing before calling the search function
        function waitForUserTyping() {
          if (timeout_id) {
            clearTimeout( timeout_id );
            timeout_id = setTimeout( searchBgg, 1000 );
          } else{
            timeout_id = setTimeout( searchBgg, 1000 );
          }
        }

        bggSearchBar = document.getElementById('bggSearchBar');
        bggSearchBar.addEventListener('keyup', waitForUserTyping);
    </script>
</body>
</html>
	<html>
	<head>
	<title>Board game geek search demo</title>
	</head>
	<body>
	<script>

	</script>

	<h1>Board game geek search demo</h1>
	<form action="#" method="get">
	<div>
	<label for="bggSearchBar">Board game name:</label>
	<input type="text" name="name" id="bggSearchBar" placeholder="Type some words"/>
	</div>
	<div>
	<label for="bggId">BoardGameGeek ID:</label>
	<input type="bggId" id="bggId"> <span id="bggMoreInfo"></span>
	</div>
	</form>
	<div id="results"></div>
	<script>
	const MAX_LENGTH=10;
	const BASE_BGG_XML_API_URL = 'https://www.boardgamegeek.com/xmlapi2/search?type=boardgame&query=';
	let timeout_id;

	function searchBgg() {
	let search = bggSearchBar.value;
	let url = BASE_BGG_XML_API_URL + search;
	let parser = new DOMParser();

	fetch(url)
	.then(response => {
	if (!response.ok) {
	throw new Error('Network response was not ok');
	}
	return response.text();
	})
	.then(response => {
	let xmlDoc = parser.parseFromString(response, "text/xml");
	let items_total = xmlDoc.getElementsByTagName('items')[0].getAttribute('total');
	let items = xmlDoc.getElementsByTagName('item');
	let results = document.getElementById('results');
	results.innerHTML = '';
	for (let i = 0; i < items.length && i < MAX_LENGTH; i++) {
	let item = items[i];
	let name = item.getElementsByTagName('name')[0].getAttribute('value');
	let year = item.getElementsByTagName('yearpublished')[0].getAttribute('value');
	let id = item.getAttribute('id');
	let div = document.createElement('div');
	div.innerHTML = name + ' (' + year + ') <a href="#" onclick="selectId('+ id +', \''+ name +'\')">Select</a> <a href="https://boardgamegeek.com/boardgame/' + id + '" target="_blank">More info</a>';
	if (items_total > MAX_LENGTH && i === MAX_LENGTH - 1) {
	div.innerHTML += '<br>Too many results, showing only the first ' + MAX_LENGTH + ' results. Please refine your search.<br>';
	}
	results.appendChild(div);
	}
	})
	.catch(error => {
	console.error('There was a problem with the fetch operation:', error);
	});
	}

	function selectId(id, name) {
	document.getElementById('bggId').value = id;
	document.getElementById('bggMoreInfo').innerHTML = '<a href="https://boardgamegeek.com/boardgame/' + id + '" target="_blank">More info</a>';
	document.getElementById('bggSearchBar').value = name;
	document.getElementById('results').innerHTML = '';
	}

	// This function waits for the user to stop typing before calling the search function
	function waitForUserTyping() {
	if (timeout_id) {
	clearTimeout( timeout_id );
	timeout_id = setTimeout( searchBgg, 1000 );
	} else{
	timeout_id = setTimeout( searchBgg, 1000 );
	}
	}

	bggSearchBar = document.getElementById('bggSearchBar');
	bggSearchBar.addEventListener('keyup', waitForUserTyping);
	</script>
	</body>
	</html>