Behavior of keypress

JavaScript
1

I am using a keypress event to trigger a .post that makes a MySQL call to return data. What actually happens if someone presses the key again before the first call is finished and the data returned and processed. Do they get cued, overrun each other, jam?

Do I need to code around that keeping track of where that process is and only post if there is not an outstanding post?

2

You can set it up so that a subsequent keypress will not do anything. This is possible because the XMLHttpRequest object keeps track of what stage the request is at, and you can query it. So yes, you need to code for this, by making the keypress event check what the request’s readyState and status properties are before starting another request. If they are 4 and 200, respectively, then the request completed successfully.

3

Here is what I came up with. Do you see any issues with this in a production environment?


$('form#resttextin input').keyup(function(e) 
{ 
	srchstr = $(this).val();

	var passdata = {id: srchstr};
	setTimeout(function() {
	        procsrch(passdata);
		passdata = null;
	}, 100);
});

function procsrch(passdata) {
	$.post('/gear/gearjs.html.php', passdata, function(data){
		var reptxt = "<div id=\\"compsrchlist\\">" + data + "</div>";
		$('#compsrchlist').replaceWith(reptxt);
		});
}
4

Well, I don’t see how that caters for your original needs. All that will do is delay the Ajax request. You need to be more specific about what you want to happen. If the user makes a second keypress before the first request has finished, you can have any of these happen:

  • request is made anyway. Multiple Ajax requests can be made, up to a maximum of about 3. The browser will queue them up anyway if the limit is reached.
  • You queue up the request manually and run it when the previous one has finished
  • You ignore the keypress event and don’t make the Ajax request.

What exactly do you want to happen?

5

What I want to have happen is to allow the user to search for a company name and every time they type in a letter I want to present a list of 10 names that start with the letters they have typed so far. So it starts with “e” and I present the first ten starting with e, then they type “x” and I present the first 10 that start with ex, etc. What I don’t want to do is tell them please type slowly and wait before you type the next letter.

I suppose ideally I would like it to do the retrieval on the first letter and then if they type in 2 more letters before the data is back, so the next search on the cirrent 3 letters, bypassing the second letter.

Does that make more sense?

6

I would really appreciate any input you can give me on how to accomplish this in a production environment. Let me try to be more clear on what I want to do.

I have a database of about 500,000 businesses. They are all geocoded for lat/lng searches based on the map area that the user is searching. When they are searching for businesses in their search area, I would like to present them with a list of the first 10 results based on cumulative keystrokes as they type.

So if they start typing and the first letter is ‘e’, I will do an ajax request to search for the first 10 distinct names that start with ‘e’. If the next letter is ‘a’ I will do the search for the first 10 distinct names that start with ‘ea’ and so on, narrowing the list each time until they name they are looking for shows up at which time they can select it.

At first, when I just let it run, it seemed to “lock up”, in other words the js keyup event would stop firing for some reason. Since I have put in the setTimeout that has stopped happening for whatever reason. I understand it could just be coincendental but it seems to work.

Again, any help regarding the best way to do this would be greatly appreciated.

Thanks