jQuery自動完成輸入驗證凍結

Question

我創建了一個類似於SO的標籤的自動填充。

它從我的數據庫抓取數據，並將數據作爲以逗號分隔的標記插入表單域。

eg. PHP, JS, SO, Laravel 

我想讓它在第四個逗號後停下來，這樣用戶最多可以輸入4個標籤。

不幸的是有一個問題。輸入字段在第4個標籤後凍結。用戶無法刪除或編輯標籤。

我不知道是什麼問題。

<script> 
$(function() { 
    function split(val) { 
     return val.split(/,\s*/); 
    } 
    function extractLast(term) { 
     return split(term).pop(); 
    } 

    $("#themeti") 

    .keypress(function (e) { 
    var input = $(this).val()+String.fromCharCode(e.which); 
    if (input.split(',').length > 4) { 
     e.preventDefault(); 
    } 
     }) 
     .autocomplete({ 
      source: function(request, response) { 
       $.getJSON("../../assets/php/themedata.php", { 
        term: extractLast(request.term) 
       }, response); 
      }, 
      search: function() { 
       // custom minLength 
       var term = extractLast(this.value); 
       if (term.length < 2) { 
        return false; 
       } 
      }, 
      focus: function() { 
       // prevent value inserted on focus 
       return false; 
      }, 
      select: function(event, ui) { 
       var terms = split(this.value); 
       // remove the current input 
       terms.pop(); 
       // add the selected item 
       terms.push(ui.item.value); 
       // add placeholder to get the comma-and-space at the end 
       terms.push(""); 
       this.value = terms.join(", "); 
       return false; 
      } 


     }); 

}); 

Answer 1

這是我落得這樣做

$("#themeti") 
     // don't navigate away from the field on tab when selecting an item 

    .bind("keydown", function(event) { 
      if (event.keyCode === $.ui.keyCode.TAB && 
        $(this).data("autocomplete").menu.active) { 
       event.preventDefault(); 
      } 
     }) 
     .autocomplete({ 
      source: function(request, response) { 
       $.getJSON("../../assets/php/themedata.php", { 
        term: extractLast(request.term) 
       }, response); 
      }, 
      search: function() { 
       // custom minLength 
       var term = extractLast(this.value); 
       if (term.length < 2) { 
        return false; 
       } 
      }, 
      focus: function() { 
       // prevent value inserted on focus 
       return false; 
      }, 

      select: function(event, ui) { 
    var terms = split(this.value); 
    if(terms.length <= 4) { 
     // remove the current input 
     terms.pop(); 
     // add the selected item 
     terms.push(ui.item.value); 
     // add placeholder to get the comma-and-space at the end 
     terms.push(""); 
     this.value = terms.join(", "); 
     return false; 
    } else { 
     var last = terms.pop(); 
     $(this).val(this.value.substr(0, this.value.length - last.length - 2)); // removes text from input 
     $(this).effect("highlight", {}, 1000); 
     $(this).addClass("red"); 
     $("#warnings").html("<span style='color:red;'>Max people reached</span>"); 
     return false; 
    } 
} 

Answer 2

你已經錯過使用String.fromCharCode（e.which）

這

var input = $(this).val(); 

應該

var input = $(this).val()+String.fromCharCode(e.which);