Styjun

I'm trying to create a way to use keyboard to sort through a results list from an API call. I've got the search portion working, just can't figure out how to create the eventlistener.

This is my autocomp.js

export default class Autocomp {
 constructor(rootEl, options = ) 
 this.rootEl = rootEl;
 this.options = 
 numRes: 10,
 data: [],
 ...options,
 ;

 this.init();
 

createResEl(res) 
 const fragment = document.createDocumentFragment();
 res.forEach((res) => 
 const el = document.createElement('li');
 el.classList.add('res');
 el.textContent = res.text;

 // Pass the value to the onSelect callback
 el.addEventListener('click', () => 
 const onSelect = this.options;
 if (typeof onSelect === 'function') onSelect(result.value);
 );

 // This is where I'm attempting to create KeyDown
 el.addEventListener('keydown', () => 
 const onSelect = this.options;
 if (typeof onSelect === 'function') onSelect(result.value);
 );

 fragment.appendChild(el);
 );
 return fragment;
 

And this is my index.js

function getAPI(api) 
 fetch(api)
 .then((res) => return res.json() ) 
 .then(function(data) 
 let arr = data.map(user => (
 text: user.login,
 value: user.id,
 ));
 window.data = arr;
 )
 .then(function() 
 new Autocomplete(document.getElementById('guser'), 
 data,
 onSelect: (UserId) => 
 console.log('selected github user id:', UserId);
 ,
 );
 ) 
 .catch(error => console.error(error))
;

And lastly my index.html where it is rendered:

 <div class="users-group form-group">
 <label>Github User:</label>
 <div id="guser"></div>
 </div>

 <script src='./index.js'></script>

Right now I'm able to click on an item from my results list and it will console.log as per my onSelect for the click eventListener. However the keyboard portion doesn't work and I'm not quite sure about what changes to make.

The 'type' parameter for your EventListener is not correct. You were trying to implement the keydown event:

// This is where I'm attempting to create onKeyDown
el.addEventListener('keydown', () => 
 const onSelect = this.options;
 if (typeof onSelect === 'function') onSelect(result.value);
);

All 'type' parameters are case-sensitive.

The correct syntax for the onkeydown property (which is also case-sensitive) is:

target.onkeydown = functionRef;