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