mwmbl/tinysearchengine/static/index.js

ts = {
    selected: null,
    numItems: 0
};

window.onload = (event) => {
    const searchInput = document.getElementById('search');

    const length = searchInput.value.length;
    searchInput.setSelectionRange(length, length);

    searchInput.oninput = e => {
        console.log("Key", e.key);
        console.log(searchInput.value);

        const encodedValue = encodeURIComponent(searchInput.value);
        fetch('/search?s=' + encodedValue).then(response => {
            clearResults();
            console.log(response);
            response.json().then(content => {
                console.log(content);
                for (const [i, element] of content.entries()) {
                    addResult(element.title, element.extract, element.url, i);
                };
                ts.selected = null;
                ts.numItems = content.length;
            });
        });
    };

    // Handle moving the selected item up and down
    document.addEventListener('keydown', (e) => {
        console.log("Key press", e);
        if (e.key == 'ArrowDown') {
            selectNextItem();
            e.preventDefault();
        } else if (e.key == 'ArrowUp') {
            selectPreviousItem();
            e.preventDefault();
        } else if (e.key == 'Enter') {
//            const form = document.getElementById('search-form');
//            form.submit();
//            event.preventDefault();
       }
    });

    // Handle pressing enter
    const form = document.getElementById('search-form');

    form.addEventListener("submit", event => {
        event.preventDefault();
        clickSelected();
    });

    searchInput.focus();
};


function selectNextItem() {
    if (ts.selected === null) {
        ts.selected = 0;
    } else if (ts.selected < ts.numItems -1) {
        ts.selected++;
    }

    updateSelected();
}


function clickSelected() {
    if (ts.selected !== null) {
        const selectedResult = document.getElementById(ts.selected.toString());
        selectedResult.click();
    }
}


function selectPreviousItem() {
    if (ts.selected === null) {
        return;
    } else if (ts.selected > 0) {
        ts.selected--;
    } else if (ts.selected == 0) {
        ts.selected = null;
    }

    updateSelected();
}


function updateSelected() {
    const results = document.querySelectorAll('.result');
    results.forEach(child => {
        child.classList.remove('selected');
    });

    if (ts.selected !== null) {
        const selectedResult = document.getElementById(ts.selected.toString());
        selectedResult.classList.add('selected');
    }
}


function clearResults() {
  const results = document.getElementById('results');
  results.innerHTML = '';
}


function addResult(title, extract, url, id) {
   const par = document.createElement("p");

   const titleText = createBoldedSpan(title);
   titleText.classList.add('title');
   const extractText = createBoldedSpan(extract);
   extractText.classList.add('extract');
   par.appendChild(titleText);

   separator = document.createTextNode(' - ')
   par.appendChild(separator);

   par.appendChild(extractText);

   const div = document.createElement("div");
   div.classList.add('result');
   div.id = id.toString();

   const urlPar = document.createElement("p");
   const urlText = document.createTextNode(url);
   urlPar.appendChild(urlText);
   urlPar.classList.add('url');
   div.appendChild(urlPar);
   div.appendChild(par);

   const link = document.createElement("a");
   link.appendChild(div);
   link.href = url;

   const results = document.getElementById('results');
   results.appendChild(link);
}

function createBoldedSpan(title) {
    span = document.createElement('span');
    title.forEach(element => {
        text = document.createTextNode(element.value);
        if (element.is_bold) {
            b = document.createElement('span');
            b.classList.add('term');
            b.appendChild(text);
            span.appendChild(b);
        } else {
            span.appendChild(text);
        }
    });
    return span;
}