How do I invoke my function on keyup?

Question

I have a JavaScript function that I want to fire once the user enters text inside an input element. Currently I can only see the function firing if I console.log it. How do I get it to fire using keyup method?

The relevant code is below.

var $ = function (selector) {
    var elements = [],
      i,
      len,
      cur_col,
      element,
      par,
      fns;

      if(selector.indexOf('#') > 0) {
        selector = selector.split('#');
        selector = '#' + selector[selector.length -1];
      }

      selector = selector.split(' ');

      fns = {
        id: function (sel) {
            return document.getElementById(sel);
        },
        get : function(c_or_e, sel, par) {
            var i = 0, len, arr = [], get_what = (c_or_e === 'class') ? "getElementsByClassName" : "getElementsByTagName";
            if (par.length) {
                while(par[I]) {
                    var temp = par[i++][get_what](sel);
                    Array.prototype.push.apply(arr, Array.prototype.slice.call(temp));
                }
            } else {
                arr = par[get_what](sel);
            }
            return (arr.length === 1)? arr[0] : arr;
        }
      };

      len = selector.length;
      curr_col = document;

      for ( i = 0; i < len; i++) {
        element = selector[i];
        par = curr_col;

        if( element.indexOf('#') === 0) {
            curr_col = fns.id(element.split('#'[1]));
          } else if (element.indexOf('.') > -1) {
            element = element.split('.');

            if (element[0]) {
                par = fns.get('elements', element[0], par);
                for ( i =0; par[i]; i++) {
                    if(par[i].className.indexOf(element[1]> -1)) {

                        elements.push(par[i]);
                    }
                }
                curr_col = elements;
            } else {
                curr_col = fns.get('class', element[1], par);
            }
          } else {
            curr_col = fns.get('elements', element, par);
          }
      }
    return elements;


};

Answer 1

You need to bind your method to the keyup event on the page.

You could try

document.addEventListener('keyup', $)

Or assuming you have the input element as element you could do

element.addEventListener('keyup', $)

Your function will be passed the event which you could use to investigate the state of the element if you needed that information to trigger or not trigger things in the function.

Here's a quick sample where the function that get's run on keypress is changeColor.

var COLORS = ['red', 'blue','yellow', 'black']
var NCOLORS = COLORS.length;
function changeColor(ev) {
  var div = document.getElementById('colored');
  var colorIdx = parseInt(Math.random() * NCOLORS);
  console.log(colorIdx);
  var newColor = COLORS[colorIdx];
  div.style.color = newColor
  console.log("New color ", newColor)
}
document.body.addEventListener('keyup', changeColor)

Though I'm not using the event (ev), I like to show, in the code, that I expect that variable to be available.

See it in action here - http://codepen.io/bunnymatic/pen/yyLGXg

As a sidenote, you might be careful about calling your function $. Several frameworks (like jQuery) use that symbol and you may run into conflicts where you're overriding the global variable $ or where the framework overrides your version if it.