Pressing the backspace key on a jQuery ui Autocomplete text box doesn't delete any letters on it?

Question

This is my text box for which I am autocomplete.

<input type="text" name="state" id="state" placeholder="State" maxlength="25" required onkeypress="return nospecialCharacters(event)"/> $("#state").autocomplete({ source: function(request, response) { var statevalue = $.trim($("#state").val()); if (statevalue) { $.ajax({ url: url + 'eee', dataType: 'jsonp', jsonp: false, timeout: 6000, jsonpCallback: 'jsonCallback', delay: 100, success: function(data) { $("#state").empty(); response(data); } }); } }, minLength: 2, appendTo: "#state_result", select: function (event, ui) { $("#state").val(ui.item.label); $("#city").focus(); return false; }, close: function(event, ui) $(this).data().term = null; }); 

Everything works fine, but the problem I am facing is that when some choice is made in textinput and trying to make backspace, it does not delete any characters (I assume it makes requests, so it keeps updating the box)

Could you let me know how to resolve this?

This is my function called by the key

 function nospecialCharacters(thi, dec) { if (window.event) keycode = window.event.keyCode; else if (e) keycode = e.which; else return true; if (((keycode >= 65) && (keycode <= 90)) || ((keycode >= 48) && (keycode <= 57)) || ((keycode >= 97) && (keycode <= 122)) || keycode == 32 || keycode == 45 || keycode == 47 || keycode == 92) { return true; } else { return false; } } 

Answer 1

Perhaps your script does not detect backspace .

Try to do it

 onkeydown="return nospecialCharacters(event)" 

instead

 onkeypress="return nospecialCharacters(event)" 

The keypress event (in the original form of IE and in Safari / Chrome) contains the actual character to be added to the text field. Since the backspace key backspace not add a new character to the field value, therefore it does not raise a keypress event.

Also inside your nospecialCharacters() function, add keycode == 8 to enable backspace ,

 if (((keycode >= 65) && (keycode <= 90)) || ((keycode >= 48) && (keycode <= 57)) || ((keycode >= 97) && (keycode <= 122)) || keycode == 32 || keycode == 45 || keycode == 47 || keycode == 92 || keycode == 8) { return true; } else { return false; } 

Answer 2

Add key code for backspace (8), and if necessary, I recommend adding a tab (9) and other keys, such as arrows, up, down, down, home, end, etc.

 var keyCodeArray = [92, 8, 9]; //keycode 8-backspace, 9-tab, delete-46 for(i = 32; i <= 40; i++) keyCodeArray.push(i); //arrows, pageup, pagedown, home, end for(i = 45; i <= 57; i++) keyCodeArray.push(i); for(i = 65; i <= 90; i++) keyCodeArray.push(i); for(i = 97; i <= 122; i++) keyCodeArray.push(i); function nospecialCharacters(thi, dec) { if(window.event) keycode = window.event.keyCode; else if(e) keycode = e.which; else return true; console.log(keycode); return $.inArray(keycode, keyCodeArray) != -1 ? true : false; }