Автозаполнение с использованием атрибута данных для источника?

Question

Могу ли я использовать атрибут данных для источника моего автозаполнения?

например

HTML

 <input type="text" class="autocomplete" data-source="/search.php" />

Javascript

  $(".autocomplete").autocomplete({
        source :  $(this).data('source'),
        minLength:1,
        select: function( event, ui ) {
            console.log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    });

Я пробовал, но всегда выдает ошибку.Что не так с моим кодом?

Uncaught TypeError: Property 'source' of object #<Object> is not a function

Answer 1

В источнике вы можете использовать this.element , который относится к входу

$(".autocomplete").autocomplete({
   source :  this.element.attr('data-source'),
   minLength:1,
   select: function( event, ui ) {
   console.log( ui.item ?
            "Selected: " + ui.item.value + " aka " + ui.item.id :
            "Nothing selected, input was " + this.value );
    }
});

Answer 2

вот исправление

$('.autocomplete').keypress(function(){ 
    $(this).autocomplete({ 
        source: $(this).data('source'), 
        minLength: 1, 
        select: function(event, ui) { 
            console.log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value); 
        } 
    }); 
}); 

Я добавил функцию нажатия клавиш, чтобы она получала текущий элемент.

Answer 3

каждое нажатие клавиши автозаполнения будет инициировать удаленный запрос, если источником является URL.что вы можете сделать, чтобы предотвратить это, это «предварительно извлечь» данные (убедитесь, что вы возвращаете JSON-допустимый массив), затем добавьте возвращаемые данные в качестве источника для автозаполнения.таким образом, данные выбираются только один раз, и автозаполнение будет ссылаться на эти данные.

jQuery autocomplete уже имеет возможность фильтрации.вам просто нужен полный список предметов, и он отфильтрует его для вас.

//get all input boxes with class "autocomplete"
$('.autocomplete').each(function(){

    //reference input and get it's url
    var input = $(this);
    var url = input.data('source');

    //get list array only ONCE for each input using their specified urls
    $.get(url, function(data) {

        //when request is received, add autocomplete using the returned data
        input.autocomplete({
            source: data,
            minLength: 1,
            select: function(event, ui) {
                console.log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value);
            }
        });
    });
});

Answer 4

Указатель this не относится к элементу .autocomplete - this соответствует только выбранному элементу внутри обратных вызовов, выполняемых jquery. Похоже, вы хотите сделать что-то вроде этого:

$(".autocomplete")
    .autocomplete({
        minLength:1,
        select: function( event, ui ) {
            console.log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    })
    .each(function() { // Goes through `.autocomplete` elements and sets source
        $(this).autocomplete("option", "source", $(this).data('source'));
    })
;