Is it a bad idea to trigger a database lookup on keyup (i.e. checking for unique username)

Question

I have a field where a user can manually enter a code for a new product. It cannot be a db-generated ID as the user needs control over the code.

As this will require a round-trip to the server to check, my intention was to trigger this check as the "keyup" event happens (a bit like a live filter would work) so that there is instantaneous feedback about the entered code (and probably CSS-based colour/image reinforcement). Admittedly for this particular function I may choose to do it onblur instead of keyup but there may well be other situations where I require a check on keyup.

Is this fundamentally a bad thing or not? A round-trip to the server to check if an item code exists (primary key) should be a very fast process but with a slow connection I'm just wondering if there could be a race condition whereby a fast typer stacks up the db calls faster than it can return and then a situation may emerge whereby a "submit" button is enabled when it shouldn't be. Of course I would also back this up with db-level checking on submission of the form, but I'm trying to make this as apparently responsive as possible.

Is it generally a bad idea to do keyup checking on any data source that's not held in memory or is this an acceptable practise?

Adam Jenkins · Answer 1 · 2013-09-18T18:22:35.987

1

There's never going to be a race condition if you abort any previous ajax request on the next keyup.

EDIT

(function() {
  var xhr; //a reference to an XMLHttpRequest Object

  var onKeyUpCallback = function() {
    if(xhr) {
      xhr.abort();
    }


    xhr = ... //build your XHR object
    //....
    xhr.send();

  }

  yourInputElement.addEventListener('keyup',onkeyUpCallback);

}());

edited Sep 18 '13 at 18:22

answered Sep 18 '13 at 18:14

Adam Jenkins

51,445
11
72
100

Could you possibly point me towards any snippets of code online that give an example of how I could do this please? Or add to your answer? – TheMook Sep 18 '13 at 18:18
for jquery, this should help: http://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery – agartee Sep 18 '13 at 18:20

score 1 · Answer 2 · answered Sep 18 '13 at 18:30

If you want to check at real time, you can approach in this way. When user types data and halts for a while then send you ajax request to check for existence of that particular thing in database.

Call a function on key up event but do not send request until user stops for a while

var timer;
function onkeyups()
{
  if(timer)
  {
   clearTimeout(timer);
  }
  timer = setTimeout(function(){callRequest();},500) // the delay, after how much millisecond the ajax call should be made when user has stopped typing
}

function callRequest()
{
// Make your ajax call or whatever

}

score 1 · Accepted Answer · answered Sep 18 '13 at 20:45

1

Since you use knockout you can use throttle

ViewModel = function() {
    this.text = ko.observable().extend({ throttle: 500 });
    this.text.subscribe(this.onText, this);
};

ViewModel.prototype = {
    onText: function(value) {
        console.log("ajax call");
    }
};

http://jsfiddle.net/TT3AB/

answered Sep 18 '13 at 20:45

Anders

17,306
10
76
144

All answers were helpful, thanks. I particularly like this one as it utilises knockout. – TheMook Sep 19 '13 at 07:37

Is it a bad idea to trigger a database lookup on keyup (i.e. checking for unique username)

3 Answers3