jQuery自動完成，凍結輸入驗證

Question

我用類似SO的標簽創建了一個自動完成功能。

它從我的數據庫中獲取數據，並將數據作為逗號分隔的標簽插入到表單字段中。

eg. PHP, JS, SO, Laravel

我希望它在第四個逗號后停止，因此用戶最多可以輸入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

您錯過了String.fromCharCode（e.which）

這個

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

應該

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

Answer 2

這就是我最終要做的

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