JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<input type="text" id="addressSearch" list="addressList" placeholder="Enter an address">
<datalist id="addressList"></datalist>
<button id="searchButton" style="display: none;">Search</button>

<script>
let addressData = [];

// Fetch and parse the CSV data
fetch('https://michelpenke.de/seminar/data_hera.csv')
    .then(response => response.text())
    .then(data => {
        // Parse CSV data
        const rows = data.split('\n').slice(1); // Skip header row
        addressData = rows.map(row => {
            const [address, latitude, longitude, link] = row.split('\t');
            return { address, latitude, longitude, link };
        });
        
        // Populate the datalist with addresses
        const addressList = document.getElementById('addressList');
        addressData.forEach(item => {
            const option = document.createElement('option');
            option.value = item.address;
            addressList.appendChild(option);
        });
    })
    .catch(error => console.error('Error loading CSV:', error));

const searchButton = document.getElementById('searchButton');
const addressSearch = document.getElementById('addressSearch');

addressSearch.addEventListener('input', updateAutocompleteAndButton);
searchButton.addEventListener('click', performSearch);

function updateAutocompleteAndButton() {
    const searchTerm = addressSearch.value;
    const exactMatch = addressData.find(item => item.address === searchTerm);
    
    // Show button only if there's an exact match
    searchButton.style.display = exactMatch ? 'inline-block' : 'none';
}

function performSearch() {
    const searchTerm = addressSearch.value;
    const result = addressData.find(item => item.address === searchTerm);

    if (result) {
        window.open(result.link, '_blank');
    } else {
        alert('Please select a valid address from the list.');
    }
}
</script>