For a JavaScript autocomplete search box, must we use the "input" event handler?

You have it mostly right, here is a detailed look at the events and potential input cases.

JavaScript events

This is when the different event are triggered:

• change

  This will be called when the blur event is triggered if the value of the <input> has been changed. In other words it will trigger when the input loses focus and the value is different to what it was.

• input

  The input event is basically everything you are looking for, it captures the event on any input change and most likely came about due to the headaches causes when developing something that watches every keystroke. The input event even manages to catch the case where the mouse pastes in content.

  Unfortunately the input event is relatively new and only available to modern browsers (IE9+).

• keydown

  The keydown event is pretty simple, it triggers when the user pushes the key down.

• keypress

  The keypress event is supposed to represent a character being typed. Because of this, it does not capture backspace or delete which immediately dismisses it for use over keydown.

• keyup

  Much like keydown, it triggers whenever the user releases a key.

• paste

  This handy event triggers when data is pasted into the element.

Modifier keys

Note that keydown, keypress and keyup carry with them information about the modifier keys Ctrl, Shift and Alt in the properties ctrlKey, shiftKey and altKey respectively.

The cases

Here is a list of the cases you need to consider:

• Entering input with keyboard (includes holding down a key)

  Triggers: keydown, keypress, input, keyup

• Deleting input (Backspace/Delete)

  Triggers: keydown, input, keyup

• Pasting using Ctrl+V

  Triggers: keydown, paste, input, keyup

• Using mouse to paste

  Triggers: paste, input

• Select an item from the autocomplete (↑/↓)

  Triggers: keydown, keyup

Implementation

Given the above, you could implement your autocomplete box handling the input event for all changes to the input, and then keydown event to handling up and down. This would really separate everything nicely and lead to some pretty clean code.

If you want to support IE8, you will need to throw everything except pasting into the keydown event and then handle paste. The paste event is quite widely supported now and has been in IE since v5.5).

Experimenting with events

Here is the jsFiddle I used to test the events, you might find it useful. It shows a bit more information about each event:

function logEvent(e) {    console.log(e.type +                "\n    this.value = '" + this.value + "'" +                (e.keyCode ? "\n    e.keyCode  = '" + e.keyCode + "'" : "") +                (e.keyCode ? "\n    char       = '" + String.fromCharCode(e.keyCode) + "'" : ""));    console.log(e);}

References

• HTML 5 Spec - Common event behaviors
• SO - onKeyPress Vs. onKeyUp and onKeyDown
• SO - JavaScript get clipboard data on paste event (Cross browser)