lwSelectTest

by Juan Lanus

HTML

<div tabindex="0" autofocus>
  Start here, tab to input field below
</div>
<div>
  <div class="lwBox">
    <input type="text" name="qqq" id="qqq" class="lwSeacthText">
  </div>
</div>
<div class="lwList" tabindex="-1">
  <ul tabindex="-1">
    <li tabindex="0">qqqq</li>
    <li tabindex="0">wwww</li> 
    <li tabindex="0">eeee</li>
    <li tabindex="0">rrrr</li>
    <li tabindex="0">tttt</li>
    <li tabindex="0">yyyy</li>
    <li tabindex="0">uuuu</li>
    <li tabindex="0">iiii</li>
    <li tabindex="0">oooo</li>
    <li tabindex="0">pppp</li>
    <li tabindex="0">aaaa</li>
  </ul>
</div>
<div id="lwBlah">
  <pre />
</div>

CSS

body {
  font-family: Montserrat, 
  sans-serif;
}
.lwBox { 
  border:2px solid transparent;
}
.lwSeacthText{
  border: 2px solid green;
  width: 100%;
  box-sizing: border-box;
}
.lwList ul {
  display: none;
  margin:0;
}
.lwBlah{
  font-size: 70%;
}

JavaScript

const searchText = document.querySelector( '.lwSeacthText' );
  const theList = document.querySelector('.lwList ul');
  theList.style.backgroundColor = 'yellow'; // check

  // show/hide outline and list on focusin/out
  searchText.addEventListener( 'focusin', ( event ) => {
    event.target.closest( '.lwBox' ).style.borderColor = 'blue';    
    theList.style.display = 'block';
    console.log( 'on ' + event.type + ' ' + theList.style.display );
  });
  searchText.addEventListener( 'focusout', ( event ) => {
    event.target.closest( '.lwBox' ).style.borderColor = '';    
  });
  // toggle list visibility upon click on the search text
  searchText.addEventListener( 'click', ( event ) => {
    const searchText = document.querySelector( '.lwSeacthText' );
    const theList = document.querySelector('.lwList ul');
    searchText.style.cursor = 'wait'; // now rorking? why?
    theList.style.display = ( theList.style.display === 'none' ) ? 'block' : 'none';
    console.log( 'on ' + event.type + ' ' + theList.style.display );
  });

  // do search after changes of the search text
  searchText.addEventListener( 'input', ( event ) => {
    const txt = event.target.value;
    document.getElementById( 'lwBlah' ).innerText += ( txt + '\n' );
  });