main.js

const $fakeDiv = document.getElementById('fake-div'); // used to measure space taken by the query content

const main = (e) => {
    const query = e.target.textContent.toLowerCase();
  
    if(query !== '') {
        const find_start = new Date().getTime();
      
        /* 
          Ex:
          
          query = 'what is the most pop'
          
          wordToComplete = 'pop' // find suggestions for this
          
          rest = 'what is the most '
        
        */

        let parts = query.split(' ');

        const wordToComplete = parts.pop();

        rest = parts.join(' ') + ' ';

        if(wordToComplete !== '') {
             // get best match using popularity 
            suggestion = getBestMatch(trie.complete(wordToComplete));

            if(suggestion) {
                $fakeDiv.innerText = query;
            
                $span.style.left = r.left + $fakeDiv.clientWidth + 'px';
                
                const ghost = suggestion.slice(wordToComplete.length);
                
                trie.clear();
            
                $span.textContent = ghost; // fill in the ghost span

                const find_end = new Date().getTime();

                const execTime = find_end - find_start;

                $time.textContent = `fetched in ${execTime}ms`;
            }
        }
        else {
            $span.textContent = ''; // clear ghost span
        }
    }
    else {
        $time.textContent = '';
        $span.textContent = ''; // clear ghost span
    }
}