Javascript 是否使用源的数据属性自动完成？

我可以使用数据属性作为自动完成的源吗

比如说

HTML

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

我试过了，但总是出错。 我的代码怎么了

---

未捕获类型错误：对象的属性“source”不是函数

此

指针未引用
.autocomplete
元素--
此
仅等于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'));
    })
;

如果源是url，则每次按下autocomplete键都会触发远程请求。防止这种情况发生的方法是“预取”数据（确保返回一个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);
            }
        });
    });
});

这是修复方法

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

我添加了一个按键功能，这样它将获得当前元素。
在源代码中，您可以使用此元素，它引用输入

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

我不是100%确定你的意思，但这听起来像是服务器端的问题。确保你是服务器端代码，通过url查询参数
term
中的值过滤列表。谢谢，但我有很多自动完成元素。它只获取第一个元素的数据源这不是一个好的解决方案。在每次按键时，您都会重新初始化autocomplete小部件，这意味着即使在适度使用之后，每个
.autocomplete
元素也会添加数百个事件侦听器。我强烈建议您使用另一种解决方案。（可能是下面列出的三个选项中的一个？）如果你解决了这个问题，请写一个答案。答案不在问题中。伟大的解决方案，总是想知道如何做到这一点。就我个人而言，我用a替换了。否则（大概）每次按键时，整个自动完成都会反弹。所以这很糟糕，因为每次按下该框中的键时，它都会实例化自动完成控件。您可以单独获取
$（'.autocomplete'）.data（'source'）
，然后将其传递给autocomplete调用。回答得好。很好，很简单：-）在我的上下文中，
这个
指的是窗口元素，所以这个解决方案不起作用。我希望避免在不引用.autocomplete类的情况下引用数据源。
$(".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 );
    }
});