Question: Using jQuery UI, I am trying to fire an event as soon as the value of the `#tag` input changed but as you can see the `log` event fires if user clicks on the page and not as soon as the value of the input changes

I already tried to bind the change event with `paste` but I am getting the same result.

```js
 $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });

     $("#tags").on('change', function(){
        console.log($(this).val());
    });
  } );
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
```

can you please let me know how to fix this?

Answer: 
As far as I can tell the Javascript is performing as expected. The `Change` event only fires after the Inputs value has changed. Change does not necessarily mean the instant the value changes. Change means when the value of the input has been committed to a different value. If you want something to happen every time an action is made then use the input event.

```js
$( function() {
        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
        ];
        $( "#tags" ).autocomplete({
          source: availableTags
        });

         $("#tags").on('input', function(){
            console.log($(this).val());
        });
      } );
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<label>Input:</label>
<input type='text' value='' id='tags'/>
```
I am not sure what you actually want, but you can use [`keypress`](https://api.jquery.com/keypress/) or [`keydown`](https://api.jquery.com/keydown/) instead of `change` and the code will fire whenever the user writes in the input.

```
$("#tags").on('keypress', function(){
    console.log($(this).val());
});

```