jQuery UI自动完成更改事件不实时触发

Question

使用jQuery UI时，我试图在#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

我不知道你真正想要的东西，但你可以使用keypress或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'/>