Keyboard input with jqueryui autocomplete remote multiple source clears previous entries

Keyboard input with jqueryui autocomplete remote multiple source clears previous entries

I posted this in StackOverflow , with no joy, so I'm asking here as well. I have a jqueryui autocomplete widget that allows multiple entries and pulls from a remote source, and it works perfectly, with one major issue. That issue is that if the user provides keyboard input (e.g., arrow keys or page up/page down keys) to select an item, ALL previous items entered are cleared from the autocomplete. It works fine if the user selects an item with the mouse. It also shows the value, not the label, as this post also mentions. I need the value to be the unique id as it allows my django form to correctly return my object (though I can work around if necessary on the back end).

I'm using jqueryui 1.10.4 with a django backend. My code is shown below. Any thoughts on how to fix it? Thanks in advance.

$('#id_legal_block') .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) { event.preventDefault(); } }).autocomplete({ minLength:1, source: function(request, response) { $.getJSON('/legalBlockList/', {block_startswith: extractLast(request.term)}, function(data) { response( $.map(data, function(item){ if (item.fields.over !== '') { return { label: item.fields.over + '/' + item.fields.block, value: item.pk }; } else { return { label: item.fields.block, value: item.pk }; } })); }); }, select: function( event, ui ) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.label ); //set the base list to the new list legalBlockList = terms; // add placeholder to get the comma-and-space at the end terms.push( "" ); this.value = terms.join( ", " ); return false; } });