Не удается получить $(это), работающий в автозаполнении jQueryUI

Я пытаюсь создать общий автозаполнение script с помощью jQueryUI. Автозаполнение должно работать для каждого:

<input type='text' class='autocomplete' id='foo'/>
<input type='text' class='autocomplete' id='bar'/>
...

Теперь я пытаюсь получить доступ к "foo" или "bar" в исходной функции с помощью $(this), но при получении предупреждения я всегда получаю "undefined".

$('input.autocomplete').autocomplete({
    source: function(req, add){
        var id = $(this).attr('id');
        alert(id);
    }
});

Что я делаю неправильно?

Ответ 1

Настройте автозаполнение отдельно для каждого элемента в вашем выборе, используя закрытие, чтобы удерживать ссылку на соответствующий элемент. Что-то вроде следующего:

$('input.autocomplete').each(function(i, el) {
    el = $(el);
    el.autocomplete({
        source: function(req, add) {
            var id = el.attr('id');
            alert(id);
        }
    });
});

Альтернатива (изменить)

Я не понимаю, почему существует такое сопротивление использованию each(): он работает, код очень четкий и читаемый, и он не представляет проблем с эффективностью; но если вы решите избежать each(), вот альтернатива...

* ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ: следующий подход полагается (немного) на внутренности автозаполнения jQuery, поэтому я бы рекомендовал первый вариант... но выбор за вами.

$('input.autocomplete').autocomplete({
        source: function(req, add) {
            var id = this.element.attr('id');
            alert(id);
        }
    });
});

Это будет работать, по крайней мере, до тех пор, пока они не изменят способ вызова функции source() из плагина autocomplete.

Итак, у вас есть два варианта... что-то для всех.

Ответ 2

Чтобы получить доступ к этому элементу ввода, вы сможете сделать следующее:

$(this.element).val();

Конечно, это просто получает значение. Вы можете получить доступ к другим атрибутам следующим образом:

$(this.element).attr('value'); // just another way to get the value
$(this.element).attr('id');

Кроме того, предположим, что вы хотите получить доступ к этому элементу в выбрать событие, вы можете сделать это так:

$(event.target).attr('value');
$(event.target).attr('id');

Ответ 3

$(this) будет получен из вашей вновь созданной функции и, следовательно, не будет работать. Переместите объявление id выше source, и оно должно работать.

Ответ 4

Марвелин прав. 'this' будет ссылаться на вновь созданную функцию, в которую вы вложены. Это легко устранить, создав var id вне функции и используя ее внутри функции.