javascript 使用数据属性自动完成源？

Autocomplete using data attribute for source?

提问by rjmcb

Can I use data attribute for the source of my autocomplete?

我可以使用 data 属性作为我的自动完成的来源吗？

for example

例如

HTML

HTML

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

Javascript

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

I tried it but it always gives me an error. What's wrong with my code?

我试过了，但它总是给我一个错误。我的代码有什么问题？

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

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

回答by gtzoumis

In source you can use this.elementwhich refers to the input

在源中，您可以使用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 );
    }
});

回答by rjmcb

here's the fix

这是解决方法

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

I added a keypress function so that it will get the current element.

我添加了一个按键功能，以便它获取当前元素。

回答by Xavi

The thispointer does not refer to the .autocompleteelement -- thisonly equals the selected element inside callbacks executed by jquery. It looks like you want to do something like this:

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

回答by Joseph

every keystroke of autocomplete will trigger a remote request if the source is a url. what you can do to prevent that is to "pre-fetch" the data (make sure to return a JSON-valid array), then add the return data as the source for the autocomplete. that way, data is only fetched once, and autocomplete will reference to that data.

如果源是一个 url，自动完成的每次按键都会触发远程请求。您可以做的是“预取”数据（确保返回一个 JSON 有效数组），然后将返回数据添加为自动完成的源。这样，数据只获取一次，自动完成将引用该数据。

jQuery autocomplete already has a filtering capability. you just need a full list of items and it will filter it for you.

jQuery 自动完成已经具有过滤功能。您只需要一个完整的项目列表，它就会为您过滤。

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