static/js/interface.js
/**
 * Add auto-complete function to a text box.
 * @function autoComplete
 * @param {Object} src - source text box
 * @param {*} arr - list of options
 * @description Modified based on the W3Schools tutorial:
 * @see {@link https://www.w3schools.com/howto/howto_js_autocomplete.asp}
 */
Add auto-complete function to a text box.
Add auto - complete function to a text box .
function autoComplete(src, arr) {
  let focus;
  src.addEventListener('input', inputEvent);
  function inputEvent(e) {
    const val = e.currentTarget.value;
    if (!val) return false;
    const VAL = val.toUpperCase();
    const l = val.length;
    const lst = [];
    for (let itm of arr) {
      const prefix = itm.substring(0, l);
      if (prefix.toUpperCase() === VAL) {
        lst.push('<strong>' + prefix + '</strong>' + itm.substring(l));
      }
    }
    listSelect(lst, src, 'down', true);
    focus = -1;
  }
  src.addEventListener('keydown', keydownEvent);
  function keydownEvent(e) {
    const table = byId('list-options');
    switch (e.key) {
      case 'Down':
      case 'ArrowDown':
        focus ++;
        addActive(table);
        break;
      case 'Up':
      case 'ArrowUp':
        focus --;
        addActive(table);
        break;
      case 'Enter':
        e.preventDefault();
        if (focus > -1) table.rows[focus].cells[0].click();
        break;
    }
  }
  function addActive(table) {
    removeActive(table);
    if (focus >= table.rows.length) {
      focus = 0;
    } else if (focus < 0) {
      focus = (table.rows.length - 1);
    }
    table.rows[focus].cells[0].classList.add('active');
  }
  function removeActive(table) {
    for (let row of table.rows) {
      row.cells[0].classList.remove('active');
    }
  }
}
function autoComplete ( src , arr ) { let focus ; src . addEventListener ( 'input' , inputEvent ) ; function inputEvent ( e ) { const val = e . currentTarget . value ; if ( ! val ) return false ; const VAL = val . toUpperCase ( ) ; const l = val . length ; const lst = [ ] ; for ( let itm of arr ) { const prefix = itm . substring ( 0 , l ) ; if ( prefix . toUpperCase ( ) === VAL ) { lst . push ( '<strong>' + prefix + '</strong>' + itm . substring ( l ) ) ; } } listSelect ( lst , src , 'down' , true ) ; focus = - 1 ; } src . addEventListener ( 'keydown' , keydownEvent ) ; function keydownEvent ( e ) { const table = byId ( 'list-options' ) ; switch ( e . key ) { case 'Down' : case 'ArrowDown' : focus ++ ; addActive ( table ) ; break ; case 'Up' : case 'ArrowUp' : focus -- ; addActive ( table ) ; break ; case 'Enter' : e . preventDefault ( ) ; if ( focus > - 1 ) table . rows [ focus ] . cells [ 0 ] . click ( ) ; break ; } } function addActive ( table ) { removeActive ( table ) ; if ( focus >= table . rows . length ) { focus = 0 ; } else if ( focus < 0 ) { focus = ( table . rows . length - 1 ) ; } table . rows [ focus ] . cells [ 0 ] . classList . add ( 'active' ) ; } function removeActive ( table ) { for ( let row of table . rows ) { row . cells [ 0 ] . classList . remove ( 'active' ) ; } } }
Add auto-complete function to a text box.
Add auto - complete function to a text box .
// this is to avoid re-assign listener when making autocomplete multiple // times, although I didn't validate // keyboard controls