jQuery UIオートコンプリートオン時リアルタイムでイベントが発生しない

Question

#tag入力の値が変更されるとすぐにイベントを発生させようとしていますが、ユーザーがページをクリックするとlogイベントが発生し、入力の値が変更されるとすぐにはなりません

私はすでに変更イベントをpasteとバインドしようとしましたが、同じ結果が得られています。

$(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()); 
 
    }); 
 
    });

<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>

あなたは私がこの問題を解決する方法を教えてくださいできますか？

Answer 1

あなたが実際に何を望んでいるのかわかりませんが、またはkeydownの代わりにchangeを使用できます。コードは、ユーザーが入力に書き込むたびに発生します。

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

Answer 2

Javascriptが期待通りの性能を発揮していることがわかります。 Changeイベントは、入力値が変更された後にのみ発生します。変更は必ずしも値が変化する瞬間を意味するものではありません。変更とは、入力の値が異なる値にコミットされたときを意味します。アクションが行われるたびに何かが起きるようにするには、入力イベントを使用します。

$(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()); 
 
     }); 
 
     });

<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'/>

jQueryのドキュメント毎