Функция не работает при вызове внутри объекта

Question

У меня есть следующий код:

// auto_suggest.js
function AutoSuggest(textboxElem, resultElem, url) {
    this.textboxElem = textboxElem;
    this.resultElem  = resultElem;
    this.url         = url;
    this.registerEvent();
}

AutoSuggest.prototype = {
    registerEvent: function() {
        this.textboxElem.onkeyup = this.getSuggestions;
    },
    getSuggestions: function() {
        // This doesn't work either: this.loadResponse("some data");
        $.get(this.url, { text: this.textboxElem.value }, this.loadResponse);
    },
    loadResponse: function(data) {
        // Not called
        this.resultElem.innerHTML = data;
    }
};

// suggest.html
<script src="jquery-1.6.1.js" type="text/javascript"></script>
<script src="auto_suggest.js" type="text/javascript"></script>

<script>
$(function() {
    var suggest = new AutoSuggest(document.getElementById("suggest"), 
                                  document.getElementById("result"), 
                                  "result.txt");
        // This DOES work: suggest.loadResponse("123");
});
</script>

<input type="text" id="suggest" /><br>
<div id="result"></div>

Функция loadResponse отказывается вызываться изнутри объекта, но со стороны это нормально.В чем может быть проблема?

Answer 1

Обратному вызову AJAX (AutoSuggest.loadResponse) по умолчанию передается объект jqXHR в качестве контекста (значение this).Вам необходимо переопределить это, передав параметр context в $.ajax.Замените вашу $.get функцию следующим:

$.ajax({
    url: this.url,
    type: 'GET',
    data: { text: this.textboxElem.value },
    success: this.loadResponse,
    context: this
});

Это заставит jQuery установить this на правильное значение.

Answer 2

код

this.textboxElem.onkeyup = this.getSuggestions;

должно быть

var t = this;
this.textboxElem.onkeyup = function() {
    t.getSuggestions();
}