Fire method when input field is edited

Question

When an html input field is edited, I want to fire a method. This method shows a datalist with options of that input field. how do I do this? Thanks

Answer 1

<input type="text" onChange="mymethod()" />

<script type="text/javascript">
function mymethod() {
    //datalist code goes here//
}
</script>

Answer 2

Good browsers support the <datalist> tag out of the box:

  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>

See: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

And supported browsers: http://caniuse.com/#feat=datalist

There are some alternatives with wider browser support and slicker interfaces.

Here's how you can use Select2 (http://ivaynberg.github.io/select2/):

HTML:

<select id="select2Example" multiple>
<option>Option 1</option>
<option>Option 2</option>
</select>

JS:

$(function(){
  $('#select2Example').select2();
});

On Plunker: http://plnkr.co/edit/AwO4sHPZsP2BqgItkwil?p=preview

Typeahead JS is also good:

https://twitter.github.io/typeahead.js/

If you decide to implement this on your own, you can use the option @MrBr1ghtSide provided for adding an event handler:

HTML:

<input onchange="handleChange"></input>

JS:

var handleChange=function(){
/*code to display options */
};

But that has the following disadvantages:

• It requires changeHandler to be in the global scope, which introduces potential for conflicts.
• You won't be able to use more than one function to handle the change event.
• You have to maintain the name of the function in two places (the HTML and the JS).

It's better to use addEventListener (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener - you can safely ignore the bubbling/capturing stuff). But note that old versions of IE use attachEvent instead. Here's an example:

HTML:

JS:

var inputBox=document.getElementById('exampleInput');
var handleChange=function(){
/*code to display options */
};
inputBox.addEventListener("change", handleChange);

Another alternative is to use a library. Many use the same syntax as jQuery: http://api.jquery.com/on/ . For example, Gator is a nice, small library for adding event listeners: http://craig.is/riding/gators . Using either jQuery or Gator, you can do the following:

HTML:

<input id="exampleInput"></input>

JS with jQuery:

$('#exampleInput).on('change',handleChange);

JS with Gator:

var inputBox=document.getElementById('exampleInput');
Gator(inputBox).on('change',handleChange);

Note that it's a very good idea to debounce the function you are using to handle the change for better user experience and performance. See this explanation: http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

Answer 3

You could indeed solve this with pure JS, but I prefer jQuery for such tasks. You may want to have a look at this: Autocomplete | jQuery UI