jQuery Autocomplete with input validation frozen

Question

I have created a autocomplete with tags similar to SO.

It grabs data from my db and inserts the data as comma delimited tags into a form field.

eg. PHP, JS, SO, Laravel

I wanted it to stop after the 4th comma, so the user can input a max of 4 tags.

Unfortunately there is a problem. The input field freezes after the 4th tag. THe user can't delete or edit the tags.

I don't know what the problem is.

<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

You have missed String.fromCharCode(e.which)

This

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

Should be

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

Answer 2

This is what I ended up doing

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