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

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

вот затруднительное положение

$('.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 2

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')); 
    }) 
; 

Answer 3

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

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.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); 
    } 
});