backspace key press on Jquery ui Autocomplete textbox doesn't remove any letters on it?

Question

This is my text field for which i am uisng 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 issue i am facing is that when some selection is made on the textinput and try to do a backspace , it doesn't remove any characters (I guess its making requests , so it keep on updating the box)

Could you please let me know how to resolve this ??

This is my function called on keypress

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

Maybe your script isn't detecting the backspace.

Try doing this,

onkeydown="return nospecialCharacters(event)"

instead of

onkeypress="return nospecialCharacters(event)"

The keypress event is (in its original IE form, and in Safari/Chrome) about an actual character being added to a text field. As backspace key doesn't add a new character to the field value, so it causes no keypress event.

Also inside your nospecialCharacters() function, add keycode == 8 to allow 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 needed I advice to add tab (9) and other keys such as arrows, page up, page down, home, end etc also.

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;
}