Question

Problem

---

I am registering a keyup event that, when activated, shows a list of proposed subjects (using JSON).

My problem is that when a keyup is registered it somehow seems to remember the previous keyup(s) as well. This means that in stead of sending one request with JSON it sends multiple requests with JSON (depending on how many keyups have been registered). This is ofcourse very inefficient and I would like to settle with just 1 request per keyup.

What have I tried

---

I have tried stepping through every action that is taken by the program. The problem occurs when I reach the second keyup statement (the first is to register a keyup in my template, the second one is a keyup in the class I am using which retrieves the value from the specified field). From this point on every keyup somehow gets “added” to the previous ones, resulting in for example:
3 previous keys were pressed -> (example) backspace gets pressed -> 4 keyups are now registered for the backspace keyup, all containing the same information.

I have tried setting up statements etc which check if previous events were the same as the current one, but that really didn’t work out. The class works on different sites so I think the problem lays somewhere else, possibly the template (which contains another event that registers keyups, but completely removing that does not change anything) which was created be different programmers over time (and it’s kind of a mess though I can’t see anything that should create this weird behaviour).

Relevant code

---

The template code:

$('subject_input').addEvent('keyup', function(event){
    var project_id = $('projectId').options[$('projectId').selectedIndex].get('value');

    if(project_id != "" && project_id != 0){ //Als er een project geselecteerd is 
        var elInput = $('subject_input');

        var gc = new GooCompleter('subject_input', {
            action: '/houroverview/ajax_subjects/'+project_id+'/',  // JSON source 
            param: 'search',            // Param string to send 
            listbox_offset: {x: 0, y: 0},   // Listbox offset for Y 
            typebox_offset: {x: 1, y: 1},
            delay: 100,                     // Request delay to 0.1 seconds 
        });
//Irrelevant code

                });

Class code keyup:

 // Retrieve suggestions on keyup
    this.field.addEvent('keyup', function(event) {
        console.log(event); //this shows the amount of keyups etc.
        //more code
    }.bind(this));

I should point out that I’m not all that great with JavaScript which means its taking me a lot of time to figure some stuff out. I still can’t see anything in this code that should produce such weird behavior.

Question

---

What is causing this weird behaviour and how can I get rid of it?

Cheers.

Answer 1

According to documentation, GooCompleter watches for keypresses by itself. You only need to initialize it once (e.g. in a domready event handler).

With your current implementation, a new instance of GooCompleter is created on every keyup, so after e.g. 10 keyups there are 10 GooCompleters, each monitoring for keypresses and sending AJAX requests (so that a subsequent keyup will lead for 10 GooCompleters to send 10 AJAX requests).